我想要一个两列div布局，其中每一个都可以有可变的宽度。
div { 浮:左; ｝ 接着{ 背景:# ccc; ｝ < div > < / div >树 < < div class = "第二”>视图/ div >
我想要“视图”div扩展到整个可用的宽度后，“树”div已经填补了所需的空间。
目前，我的“视图”div被调整为它所包含的内容 如果两个跳水都占据整个高度也会很好。
不可重复声明:
当设置float:left时，将div扩展到最大宽度 因为左边的宽度是固定的。 帮助div -使div适合剩余的宽度 因为我需要两列都向左对齐
当前回答
如果两个宽度都是可变长度，为什么不用一些脚本或服务器端计算宽度呢?
<div style=“width： <=% getTreeWidth（） %>”>Tree</div>
<div style="width: <=% getViewWidth() %>">View</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编辑器
如果两个宽度都是可变长度，为什么不用一些脚本或服务器端计算宽度呢?
<div style=“width： <=% getTreeWidth（） %>”>Tree</div>
<div style="width: <=% getViewWidth() %>">View</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 >
使用CSS Flexbox flex-grow属性填充剩余空间。 Html, body { 高度:100%; ｝ 身体{ 显示:flex; ｝ 接着{ flex-grow: 1; ｝ < span style="background: #bef;"树> < / div > <div class="second" style="background: #ff9;"视图> < / div >
我不确定这是否是你所期待的答案，但是，为什么不将树的宽度设置为“自动”和“视图”的宽度设置为100% ?
