我想要一个两列div布局，其中每一个都可以有可变的宽度。
div { 浮:左; ｝ 接着{ 背景:# ccc; ｝ < div > < / div >树 < < div class = "第二”>视图/ div >
我想要“视图”div扩展到整个可用的宽度后，“树”div已经填补了所需的空间。
目前，我的“视图”div被调整为它所包含的内容 如果两个跳水都占据整个高度也会很好。
不可重复声明:
当设置float:left时，将div扩展到最大宽度 因为左边的宽度是固定的。 帮助div -使div适合剩余的宽度 因为我需要两列都向左对齐
当前回答
你可以使用W3的CSS库，它包含了一个叫做rest的类:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> < div class = " w3-row”> <div class="w3-col " style="width:150px"> < p > 150 px < / p > < / div > <div class="w3-rest w3-green"> < p > w3-rest < / p > < / div > < / div >
不要忘记在页面的标题中链接CSS库:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
这里是官方演示:W3学校Tryit编辑器
其他回答
使用钙:
.leftSide { 浮:左; 宽度:50 px; 背景颜色:绿色; ｝ .rightSide { 浮:左; 宽度:calc(100% - 50px); 背景颜色:红色; ｝ < div风格= "宽度:200 px”> < div class = " leftSide " > < / div > < div class = " rightSide“b > < / div > < / div >
这样做的问题是，所有宽度都必须显式定义，要么作为值(px和em可以)，要么作为显式定义本身的内容的百分比。
如果另一列的宽度是固定的，那么如何使用适用于所有常见浏览器的calc CSS函数:
width: calc(100% - 20px) /* 20px being the first column's width */
这样，第二行的宽度将被计算(即剩余宽度)并响应地应用。
我不确定这是否是你所期待的答案，但是，为什么不将树的宽度设置为“自动”和“视图”的宽度设置为100% ?
这将是一个很好的例子，说明用表处理起来很简单，而用CSS处理起来很难(如果不是不可能的话，至少在跨浏览器的意义上)。
如果两列的宽度都是固定的，这就很容易了。
如果其中一列的宽度是固定的，这将稍微困难一些，但完全可行。
两个列的宽度可变，恕我直言，你只需要使用一个两列的表。
我刚刚发现了伸缩盒的魔力(显示: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/
