展开一个 div 以填充剩余的宽度

小编典典

展开一个 div 以填充剩余的宽度

all

我想要一个两列的 div 布局，每个布局都可以有可变的宽度，例如

div {

  float: left;

}



.second {

  background: #ccc;

}


<div>Tree</div>

<div class="second">View</div>

我希望 ‘view’ div 在 ‘tree’ div 填满所需空间后扩展到可用的整个宽度。

目前，我的“视图”div 的大小已调整为它包含的内容如果两个 div 占据整个高度也会很好。

阅读 217

2022-03-04

共1个答案

小编典典

解决这个问题其实很简单，但一点也不明显。您必须触发称为“块格式化上下文”（BFC）的东西，它以特定方式与浮点数交互。

只需取第二个 div，删除浮动，然后给它overflow:hidden。除可见之外的任何溢出值都会使其设置的块成为 BFC。BFC
不允许后代浮点数逃脱它们，也不允许兄弟/祖先浮点数侵入它们。这里的最终效果是浮动的 div 会做它的事情，然后第二个 div 将是一个普通的块，占用
除了浮动所占用的 所有可用宽度。

这应该适用于所有当前的浏览器，尽管您可能必须在 IE6 和 7 中触发 hasLayout。我不记得了。

演示：

固定左：http: //jsfiddle.net/A8zLY/5/
修复正确：http: //jsfiddle.net/A8zLY/2/

div {
float: left;
}

.second {
background: #ccc;
float: none;
overflow: hidden;
}

Tree

View

2022-03-04