我想要一个两列的div布局,其中每个布局可以具有可变的宽度,例如
div {
float: left;
}
.second {
background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>
我希望'view'div扩展到'tree'div填充所需空间后可用的整个宽度。
目前,我的“视图” div已调整为包含它的内容的大小,如果两个div都占据整个高度,那也会很好。
不重复免责声明:
这个问题的解决其实很容易,但不是在所有明显。您必须触发一种称为“块格式设置上下文”(BFC)的东西,它以特定方式与浮点数交互。
只是第二个div,删除浮点数,然后overflow:hidden
改用它即可。除可见之外的任何溢出值都会使它设置的块成为BFC。BFC不允许子代浮动对象逃脱它们,也不允许同级/祖先浮动对象入侵它们。最终的效果是,浮动div将执行其操作,然后第二个div将是一个普通块,占用所有可用宽度,但不包括float占用的宽度。
尽管您可能必须在IE6和7中触发hasLayout,但它应该可以在所有当前浏览器上运行。我不记得了。
演示:
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句