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

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

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

演示:

固定左:http://jsfiddle.net/A8zLY/5/ 固定权限:http://jsfiddle.net/A8zLY/2/

div { 浮:左; ｝ 接着{ 背景:# ccc; 浮:没有; 溢出:隐藏; ｝ < div > < / div >树 < < div class = "第二”>视图/ div >

你可以尝试CSS网格布局。

戴斯。莱纳姆:{ 显示:网格; Grid-template-columns: max-content auto; ｝ dt { grid-column: 1; ｝ dd { grid-column: 2; 保证金:0; background - color: # ccc; ｝ < dl > < dt > lorem ipsum < / dt > <dd>dolor sit meet </dd> < dt >鲤鱼< / dt > < dd >吴廷琰< / dd > < / dl >

如果两个宽度都是可变长度，为什么不用一些脚本或服务器端计算宽度呢?

<div style=“width： <=% getTreeWidth（） %>”>Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>

如果另一列的宽度是固定的，那么如何使用适用于所有常见浏览器的calc CSS函数:

width: calc(100% - 20px) /* 20px being the first column's width */

这样，第二行的宽度将被计算(即剩余宽度)并响应地应用。

flex-grow -定义必要时伸缩项目增长的能力。它接受一个作为比例的无单位值。它规定了项目在伸缩容器内应该占用多少可用空间。

如果所有项都将flex-grow设置为1，则容器中的剩余空间将平均分配给所有子容器。如果其中一个子节点的值为2，那么剩余的空间将占用其他节点两倍的空间(至少它会尝试这样做)。点击这里查看更多信息

.parent { 显示:flex; ｝ .child { flex-grow: 1;//它接受作为比例的无单位值 ｝ .left { 背景:红色; ｝ 铃声{ 背景:绿色; ｝ < div class = "父" > <div class="child left"> 剩下的50% < / div > <div class="儿童权利"> 正确的50% < / div > < / div >

看看现有的CSS布局框架。我推荐Simpl或者稍微复杂一点的Blueprint框架。

如果你正在使用Simpl(它只涉及导入一个simple .css文件)，你可以这样做:

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

，以进行对半布局，或:

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

25-75美元。

就是这么简单。