内左浮动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容器垂直

回答

相关问题