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

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

div{
浮动:左;
}
.第二{
背景:#ccc;
}
<部门>树&lt/部门>
<div class=“second”>视图&lt/部门&gt

我希望'view'div在'tree'div填充所需空间后扩展到整个可用宽度

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


不重复免责声明:

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

解决这个问题其实很简单,但并非显而易见。你必须触发一个叫做“a”的东西;“块格式上下文”;(BFC),它以特定的方式与浮动进行交互

只需使用第二个div,删除float,并将其改为overflow:hidden。除visible之外的任何溢出值都会使其设置的块成为BFC。BFC不允许后代浮点数逃脱它们,也不允许兄弟/祖先浮点数侵入它们。这里的净效果是浮动div将完成它的工作,然后第二个div将是一个普通块,占据所有可用宽度,除了浮动所占据的宽度

这应该适用于所有当前浏览器,尽管您可能需要在IE6和IE7中触发hasLayout。我想不起来了

演示:

  • 固定左:http://jsfiddle.net/A8zLY/5/
  • 固定权利:http://jsfiddle.net/A8zLY/2/
div{
浮动:左;
}
.第二{
背景:#ccc;
浮动:无;
溢出:隐藏;
}
<部门>树&lt/部门>
<div class=“second”>视图&lt/部门&gt

发表评论