我想要一个两列div布局,其中每一个都可以有可变的宽度。

div { 浮:左; } 接着{ 背景:# ccc; } < div > < / div >树 < < div class = "第二”>视图/ div >

我想要“视图”div扩展到整个可用的宽度后,“树”div已经填补了所需的空间。

目前,我的“视图”div被调整为它所包含的内容 如果两个跳水都占据整个高度也会很好。


不可重复声明:

当设置float:left时,将div扩展到最大宽度 因为左边的宽度是固定的。 帮助div -使div适合剩余的宽度 因为我需要两列都向左对齐


当前回答

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

其他回答

使用CSS Flexbox flex-grow属性填充剩余空间。 Html, body { 高度:100%; } 身体{ 显示:flex; } 接着{ flex-grow: 1; } < span style="background: #bef;"树> < / div > <div class="second" style="background: #ff9;"视图> < / div >

使用钙:

.leftSide { 浮:左; 宽度:50 px; 背景颜色:绿色; } .rightSide { 浮:左; 宽度:calc(100% - 50px); 背景颜色:红色; } < div风格= "宽度:200 px”> < div class = " leftSide " > < / div > < div class = " rightSide“b > < / div > < / div >

这样做的问题是,所有宽度都必须显式定义,要么作为值(px和em可以),要么作为显式定义本身的内容的百分比。

看看现有的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美元。

就是这么简单。

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

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

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

一个稍微不同的实现,

两个div面板(内容+额外),并排,内容面板展开,如果额外面板不存在。

jsfiddle: http://jsfiddle.net/qLTMf/1722/