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

Question

我想要一个两列的 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因为我需要两列都左对齐

Answer 1

这个问题的解决方案实际上非常简单，但并不是全部显而易见。您必须触发一种称为“ block 格式化上下文”(BFC)的东西，它以特定方式与 float 交互。

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

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

演示:

• 固定左侧:http://jsfiddle.net/A8zLY/5/
• 右固定:http://jsfiddle.net/A8zLY/2/

div {
  float: left;
}

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

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