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

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

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

我不确定这是否是你所期待的答案，但是，为什么不将树的宽度设置为“自动”和“视图”的宽度设置为100% ?

我刚刚发现了伸缩盒的魔力(显示: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盒子给了我15年来一直希望css能给我的控制。终于到了!更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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 >

看看这个解决方案

.container { width: 100%; height: 200px; background-color: green; } .sidebar { float: left; width: 200px; height: 200px; background-color: yellow; } .content { background-color: red; height: 200px; width: auto; margin-left: 200px; } .item { width: 25%; background-color: blue; float: left; color: white; } .clearfix { clear: both; } <div class="container"> <div class="clearfix"></div> <div class="sidebar">width: 200px</div> <div class="content"> <div class="item">25%</div> <div class="item">25%</div> <div class="item">25%</div> <div class="item">25%</div> </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美元。

就是这么简单。