爲什麼這個「明確：兩個」不防止包裝？

我想DIV的「clear：both」風格可以讓它的包含DIV的父代不會換行，但是在HTML下面看起來不是那樣工作的。爲什麼這個「明確：兩個」不防止包裝？

如果瀏覽器窗口很窄，第二個DIV「OK OK」仍然會包裝到下一行。

<div style="overflow: hidden;"> 
     <div style="float: left; overflow: hidden; white-space: nowrap"> 
         Hello world 1 Hello world 2 Hello world 3 
        </div> 
     <div style="float: left; overflow: hidden; white-space: nowrap"> 
       OK OK OK OK OK OK OK OK 
        </div> 
     <div style="clear: both;"> 
     </div> 
    </div>

我錯過了什麼嗎？

來源

2009-04-25 Morgan Cheng

因爲兩個內部div向左浮動，所以當瀏覽器窗口變得太窄時它們會自動換行。我建議你在外部div上指定一個寬度（你有溢出的那個：隱藏在上面）。這樣，兩個內部div可以浮動，但當瀏覽器縮小時它們不會換行。

<div style="overflow: hidden; width: 600px;"> 
      <div style="float: left; overflow: hidden; white-space: nowrap"> 
        Hello world 1 Hello world 2 Hello world 3 
       </div> 
      <div style="float: left; overflow: hidden; white-space: nowrap"> 
          OK OK OK OK OK OK OK OK 
       </div> 
      <div style="clear: both;"> 
      </div> 
    </div>

如果你想要更多的控制，你可能要實現使用IE瀏覽器中的表達式最小寬度的黑客;最小寬度：在FF中工作。

來源

2009-04-25 13:29:54

總有一個機會，只要將申報單將包裹因爲沒有寬度內的div指定。如果你沒有指定寬度，浮動的div就會盡可能地寬，以保存其內容，最多達到其容器的寬度。 – wheresrhys 2009-04-25 13:32:42

我想你可能會誤解「清晰」屬性。它並不具體控制包裝，它控制後來浮動元素的位置。上面的html中沒有任何內容阻止第二個div流向下一行。

這裏是清除元件一個很好的破敗： http://www.builderau.com.au/program/css/print.htm?TYPE=story&AT=339278136-339028392t-320002011c

爲了使佈局不流動，你可能將不得不指定在div容器硬寬度。

來源

2009-04-25 13:32:14 womp

將兩個新屬性添加到您的樣式&它將工作！

text-align: left; 
    width: 1010px;

    <div style="float: left; overflow: hidden; white-space: nowrap; 
        text-align: left;width: 1010px;"> 
        Hello world 1 Hello world 2 Hello world 3 
       </div> 

       <div style="clear: both;"> 
       </div> 
       <div style="float: left; overflow: hidden; white-space: nowrap; 
         text-align: left;width: 1010px;"> 
         OK OK OK OK OK OK OK OK 
         </div> 
         <div style="clear: both;"> 
         </div> 
         </div>

來源

2013-02-01 06:31:32

爲什麼這個「明確：兩個」不防止包裝？

回答

相關問題