一千萬個為什麽

搜索

如何在不隱藏DIV部分的情況下使用CSS float

在DIV上使用CSS float時,其他未浮動的DIV將繼續占用浮動DIV的空間。雖然我確信這是故意的,但我不知道如何達到我期待的效果。請考慮這個例子:

<html>

<div style="width:400px">

<div style="width:150px;float:right;border:thin black solid">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

<div style="background-color:red;border:thin black solid">Some sample text</div>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>

</html> 

如果您將此HTML粘貼到瀏覽器中(或檢查其 jsfiddle ),您會註意到“某些示例文字“是紅色的,並且紅色背景一直延伸到浮動的DIV。雖然我確信有一種方法可以遮掩我不想要的紅色背景部分,但仍然會將邊框裁剪掉並隱藏在DIV下面。理想情況下,我希望背景顏色和邊框只占用有效的文本空間,而不是在浮動的DIV下面爬行。這種效果可能嗎?

請註意,我正在使用float屬性而不是作為列的替代,而是作為將文本在其周圍流動的塊。迄今為止,所提出的解決方案都沒有考慮到這一點。為了清楚起見,這裏有一些圖像。

這是我得到的:

Bad

這就是我要的:

Good

您會註意到,在這兩個示例中,當文本到達底部時,最終文本將環繞浮動部分。我可以通過直接指定包含“一些示例文本”的div的寬度來實現第二個示例。我不想指定寬度。這似乎是多余的,因為我想要與它周圍的文本相同的寬度。但也許這是不可能的?

最佳答案

這裏有一個解決方案:

<div style="background-color:red;border:thin black solid;overflow:hidden;">Some sample text</div>

基本上這裏的魔術是 overflow:hidden ,它改變了CSS視覺格式模型。查看 CSS布局基礎知識,第5部分:浮動

固定相鄰的方格

     

我們來看看紅色的段落邊框   問題首先。之所以這樣   段落邊框出現在後面   圖像是因為漂浮物沒有   重新定位塊框   毗鄰他們。在這個例子中,   浮動圖像只是推動線路   在段落內的框。所以   文本被推向右邊,但是   實際的段落框仍然存在   在整個寬度上延伸   容器

     

這個問題的解決方法來自a   在這個非常隱藏的段落中   CSS 2.1的浮動部分   規格:

     
    

表格的邊框,a     塊級替換元素,或者一個     元素在正常流程中     建立新的封鎖格式     上下文(例如元素為     '可見'以外的'溢出')必須     不重疊任何浮動相同     以格式化上下文為例     元素本身。

  
     因此,以防止我們的段落塊   重疊浮動的內容,   解決方案是創建一個“新塊”   格式化上下文“,在CSS中   規範作者術語。   聽起來很棘手,呃?幸運的是,它   並不難。新的塊格式   上下文由任何塊創建   它符合這些標準:     
      
  • 已浮動
  •   
  • 絕對定位
  •   
  • 具有其他不同尋常風味之一的顯示屬性值   (內聯塊,表格單元格等)
  •   
  • 將其溢出屬性設置為可見以外的內容。
  •   
     最後一個選項是那個   在大多數情況下最容易做到:設置   溢出:在我們的段落將自動   創建一個新的“塊格式   上下文“,並呈現該段落   邊界在正確的地方。

轉載註明原文: 如何在不隱藏DIV部分的情況下使用CSS float