展开div来获取剩余宽度

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

div {
    float: left;
}
.second {
    background: #ccc;
}

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

---

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

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

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

演示：

修正了左侧：http://jsfiddle.net/A8zLY/5/

固定的权利：http://jsfiddle.net/A8zLY/2/

---

我刚刚发现了柔性盒的魔力（display：flex）。 尝试这个：

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

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

---

这将是一个很好的例子，用于处理表格并且很难做到（如果不是不可能，至少在跨浏览器的意义上）处理CSS。

如果两列的宽度都是固定的，这很容易。

如果其中一列的宽度是固定的，这将会稍微困难一些，但完全可行。

对于两列可变宽度，恕我直言，你只需要使用一个双列表。

链接地址: http://www.djcxy.com/p/27427.html

上一篇: Expand a div to take the remaining width

下一篇: Cancel transition of child element on hover of parent element?