小编典典

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

all

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

div {

  float: left;

}



.second {

  background: #ccc;

}


<div>Tree</div>

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

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

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



阅读 219

收藏
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