如何強制浮動DIV使用最大水平空間時，由於調整大小時發生摺疊

我有兩個水平對齊的div，它們將在調整瀏覽器窗口大小時自動換行（它們的大小變小，直到在某個點發生換行）。的問題是，這些兩個div不會自動填寫它們留下如何強制浮動DIV使用最大水平空間時，由於調整大小時發生摺疊

兩者都有寬度48％，最小寬度400像素和被浮置在一個div容器左

例

DIVCONTAINER的間隙

DIV1 ==>有右側巨大的空間，因爲DIV1將包裹

DIV2後不會自動拉伸==>有右側巨大的空間，因爲DIV2將包裝後不會自動拉伸

是否div自動拉伸甚至可能在包裝發生調整大小？

編輯：

這裏的問題的演示

JSFiddle

<div class="wrapper"> 
    <div class="div1"></div> 
    <div class="div2"></div> 
</div> 

.div1, .div2 {float: left; width: 50%; min-width: 400px; height: 100px;} 
.div1 {background:red;} 
.div2 {background:blue;}

enter image description here

來源

2014-09-01 user405723

向我們展示你的代碼，如果可能的話做一個小提琴表現出來。 – Benjamin 2014-09-01 14:22:38

飄來的div將不能夠動態地佔據了容器的剩餘寬度 - 他們不再是文檔正常佈局的一部分。

你可以實現你通過刪除您的花車在尋找什麼，然後用

表顯示屬性，或
Flexbox的（如果你不需要擔心< = IE9）

CSS-Tricks' Filling space in the last row將指導您正確地使用flexbox解決方案。

來源

2014-09-01 15:04:44 Larry

感謝您的建議！這是我修改後的flexbox修復程序（http://jsfiddle.net/Rh62G/6/）。缺點是，就像你說的那樣，它在IE9中不起作用。你有沒有一個基於表格顯示屬性的解決方案的例子，可以在IE9中工作？ – user405723 2014-09-02 10:43:27

你可以嘗試這樣的：http://jsfiddle.net/Rh62G/7/我建議使用html元素上的類來定位ie9，以便它可以覆蓋它不支持的屬性：https：// gist .github.com/necolas/982797＃文件-IE-CC-SERVERCONFIG-HTML。我已經編寫了一個網格系統，它使用flexbox用於現代瀏覽器，並回退到非支持瀏覽器的內聯塊元素;它可能被用作通用解決方案（Sass）：https：//github.com/larrybotha/styleguide/blob/inuit/scss/core/objects/_grids.scss和https://github.com/larrybotha/styleguide /blob/inuit/scss/core/generic/_widths.scss – Larry 2014-09-02 12:15:10

@ user405723 ^。 Shoulda提到你：P – Larry 2014-09-03 13:01:59

可能是因爲最小寬度：400像素

如果調整低於800像素的瀏覽器，即寬度，因爲最小寬度的48％，將無法正常工作：400像素

如果你想換兩div封裝成wrapper，然後wrapper應該有800px或高於800px的寬度。

Play with fiddle你會知道發生了什麼......提高包裝寬度800像素...

來源

2014-09-01 15:05:31

如何強制浮動DIV使用最大水平空間時，由於調整大小時發生摺疊

回答

相關問題