內左浮動div的不擴大div容器垂直

我有一個具有以下屬性的div容器：內左浮動div的不擴大div容器垂直

#cat_container{ 
margin:0; 
padding:5px; 
border:1px solid red; 
min-height:200px; 
}

裏面有多個懸空div的。問題在於它們不會強制包含div向下擴展，而是在容器div的邊界之外重疊並繼續。

懸空的div：

.cat_wrap{ 
border: 1px solid #000; 
width:100px; 
min-height:120px; 
margin:0 10px 5px 0; 
padding:0; 
float:left; 
}

如果我走左邊的浮出來，包含div不垂直擴展，它應該做的。那麼如何讓內部div向左浮動，而且還要垂直展開容器div？

來源

2012-01-28 crm

在http://jsfiddle.net/ – Sotiris 2012-01-28 13:49:27

您需要爲主div設置溢出。溢出：自動;這將迫使div容器擴展並適應內容。

#cat_container{ 
    margin:0; 
    padding:5px; 
    border:1px solid red; 
    min-height:200px; 
    overflow: auto; 
    height: auto !important; 
}

來源

2012-01-28 13:54:30 Pawel

創建演示這是什麼需要做的時候使用浮動div的具體？ – crm 2012-01-28 13:57:27

不，只有當你想讓div適應內容大小。 – Pawel 2012-01-28 14:02:01

非常感謝！我有同樣的問題，你是一個真正的紳士和學者。 – Dean 2017-03-15 20:34:07

這是一個常見問題，並且使用「clearfix」解決方案修復。設置溢出會解決這個問題，但有更好的解決方案，如下所示：

.mydiv:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 
* html .mydiv    { zoom: 1; } /* IE6 */ 
*:first-child+html .mydiv { zoom: 1; } /* IE7 */

該方案的要點是觸發div的hasLayout財產。幸運的是，爲了觸發IE 6/7，縮放設置爲1就足夠了。支持:after僞元素的現代瀏覽器可以使用第一條語句，它更清晰並且不會影響溢出屬性。

請注意，您應該避免使用!important陳述，如前面的答案中所建議的，因爲這不是很好的CSS。此外，如果您希望並且無法解決問題，它不會允許您控制div的高度。

來源

2012-01-28 14:27:19 MMM

這是。這樣做的一個好方法是使用flex屬性。

.container { 
    display: flex; 
    flex-wrap: wrap; 
}

然後子元素可以擺脫舊的神奇float屬性。

看看這個JSFiddle看看效果。

注意：當兒童元素的高度不統一時，flex方式的行爲將與float方式不同。但很難說哪一個是正確的。

來源

2016-12-08 05:10:40 Ming

內左浮動div的不擴大div容器垂直

回答

相關問題