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

Question

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

 div {
  float: left;
}

.second {
  background: #ccc;
}

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

我希望“视图”div 在“树”div 填充所需空间后扩展到可用的整个宽度。

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

---

不重复免责声明：

• 设置 float:left 时将 div 扩展到最大宽度， 因为左边的宽度是固定的。
• 帮助 div - 使 div 适合剩余宽度，因为我需要两列都向左对齐

原文由 Anurag Uniyal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

只需要第二个 div，删除浮动，然后给它 overflow:hidden 代替。除了 visible 之外的任何溢出值都会使设置它的块成为 BFC。 BFC 不允许后代浮点数逃脱它们，也不允许兄弟/祖先浮点数侵入它们。这里的净效果是浮动的 div 会做它的事情，然后第二个 div 将是一个普通的块，占用 除了 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>

原文由 Xanthir 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我刚刚发现了 flex boxes (display: flex) 的魔力。尝试这个：

 <style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

Flex boxes 给了我 15 年来我希望 css 拥有的控制权。它终于来了！更多信息： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

原文由 B T 发布，翻译遵循 CC BY-SA 4.0 许可协议