如何防止浮動的div元素在瀏覽器重新調整大小時打包？

當瀏覽器重新調整大小以使視口變小時，如何使DIV左右相鄰的浮動不會打包？如何防止浮動的div元素在瀏覽器重新調整大小時打包？

div { 
    float: left; 
}

例如，當瀏覽器完全最大化div s的線路像這樣：

|div| |div| |div| |div| |div| |div| |div| |div|

但是，當瀏覽器重新調整大小小出現這種情況：

|div| |div| |div| |div| |div| 
|div| |div| |div|

哪有當瀏覽器縮小尺寸時，我會不會換行div？

來源

2010-02-16 Mark

將它們包裹在另一個div中，該div具有指定的寬度（或最小寬度）。

<div class="parentContainer"> 
    <div class="floater"></div> 
    <div class="floater"></div> 
    <div class="floater"></div> 
</div> 

.parentContainer { 
    /* The width of the parent needs to be equal to the total width of the children. 
    Be sure to include margins/padding/borders in the total. */ 
    width: 600px; 
    overflow: auto; 
}

它也有助於有溢出：自動在包含div上指定，以允許其高度匹配子浮點數。

來源

2010-02-16 18:05:57 AaronSieb

無法得到這個工作（http://jsfiddle.net/ajkochanowicz/tSpLx/） – 2012-03-12 17:27:27

@ajkochanowicz什麼不適合你的工作是什麼嗎？當我調整「結果」窗口的大小到小於400像素時，浮動按照廣告方式保留在3,3,2配置中。 – AaronSieb 2012-03-12 17:30:34

每個div都向左浮動。我不知道什麼是「廣告」3,3,2配置。如果它們全部向左浮動，爲什麼它們不能繼續水平移動呢？ – 2012-03-12 17:33:46

讓他們

.container { 
width: 500px; 
white-space: nowrap; 
overflow: visible/hidden/scroll - whichever suits you; 
}

來源

2010-02-16 18:10:22 easwee

那不是'float-left'子女的情況。 – 2016-02-22 20:28:53

我將容器的寬度設置爲100％ - 適用於我的情況。可以幫助你。 – 2016-03-24 22:22:42

圍繞容器DIV我意識到這是時髦的仇恨表上，但他們可能是有用的。
http://jsfiddle.net/td6Uw/
而不是浮動div，將它們放在一個表中，並用大小限制div包裹表。 TR將防止包裝。
另外，我在TD中使用DIV來使單元格造型更容易。如果你花費時間，你可以對TD進行風格設計，但是我覺得它們很難風格化，通常只是使用我的小提琴所採用的DIV-in-TD方法。

來源

2012-05-17 12:26:01 dlchambers

我敢遲到了比賽，但這裏是我發現，工作原理：

比方說，你有一個導航結構爲：

<nav> 
    <ul> 
     <li><a href="#">Example Link</a></li> 
     <li><a href="#">Example Link</a></li> 
     <li><a href="#">Example Link</a></li> 
    </ul> 
</nav>

爲了得到它，以顯示鏈接內聯，沒有任何包裝，你可以簡單地使用：

nav ul { 
    white-space: nowrap; 
} 

nav ul li { 
    display: table-cell; 
}

沒有固定的寬度或任何要求。

小提琴：http://jsfiddle.net/gdf3prb4/

來源

2014-11-25 22:28:47 JacobTheDev

這是IMO最好的方法，也是唯一可以輕鬆工作的方法（至少對我而言）。如果你確切地知道你需要多少像素，製作具有固定寬度的包裝div的其他方法可能會奏效，但在當今世界，屏幕尺寸總是不同的，你不想依靠固定寬度，因爲這可以防止你從創建一個動態網站。 – edwardtyl 2015-07-30 15:02:06

這種方法與我的情況最相關（缺少flexbox，但它仍然是我們想要支持的瀏覽器中的一個碎片） - 但是在我的情況下，我發現我還需要'display：table' wrapper'ul'以保持列中原始的100％高度。那樣的話，那個父母上的'white-space：nowrap'也不是必須的，列寬最終總是分佈不超過100％。 – natevw 2015-10-15 22:08:41

@JacobTheDev當然應該接受更加地道和靈活的方法。很高興我可以推動你超過5K馬克與我upvote :-) – davnicwil 2017-05-18 15:40:39

它實際上是非常簡單的。代碼示例：

Element { 
white-space: nowrap; 
}

來源

2016-11-07 02:00:14 derpymelon

不明白爲什麼這不是頭號答案ahha – 2016-12-30 21:28:15

通過golly這是它。這裏沒有其他的工作。 FWIW，我把它放在父母「div」式的元素上。 – Qix 2017-04-13 23:58:09

如何防止浮動的div元素在瀏覽器重新調整大小時打包？

回答

相關問題