我想要一个两列的 div 布局,每个布局都可以有可变宽度,例如
div {
float: left;
}
.second {
background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>
我希望 'view' div 在 'tree' div 填满所需空间后扩展到可用的整个宽度。
目前,我的“ View ”div 的大小已调整为它包含的内容 如果两个 div 占据整个高度也很好。
不重复免责声明:
- Expand div to max width when float:left is set 因为左边的宽度是固定的。
- Help with div - make div fit the remaining width 因为我需要两列都左对齐
最佳答案
这个问题的解决方案实际上非常简单,但并不是全部显而易见。您必须触发一种称为“ block 格式化上下文”(BFC)的东西,它以特定方式与 float 交互。
只需取第二个 div,删除 float ,然后将其改为 overflow:hidden
。除可见之外的任何溢出值都会使其设置的 block 成为 BFC。 BFC 不允许后代 float 逃脱它们,也不允许兄弟/祖先 float 侵入它们。这里的最终效果是 float 的 div 会做它的事情,然后第二个 div 将是一个普通的 block ,占用所有可用的宽度除了被 float 占用的宽度。
这应该适用于所有当前浏览器,尽管您可能必须在 IE6 和 7 中触发 hasLayout。我不记得了。
演示:
div {
float: left;
}
.second {
background: #ccc;
float: none;
overflow: hidden;
}
<div>Tree</div>
<div class="second">View</div>
关于html - 展开一个 div 以填充剩余的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1260122/