我想要一个两列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编辑器

其他回答

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

<div style=“width: <=% getTreeWidth() %>”>Tree</div>

<div style="width: <=% getViewWidth() %>">View</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美元。

就是这么简单。

你可以尝试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 >

我刚刚发现了伸缩盒的魔力(显示: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/

你可以使用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编辑器