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

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

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

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


不可重复声明:

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


当前回答

一个稍微不同的实现,

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

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

其他回答

<html> <head> <style type="text/css"> div.box { background: #EEE; height: 100px; width: 500px; } div.left { background: #999; float: left; height: 100%; width: auto; } div.right { background: #666; height: 100%; } div.clear { clear: both; height: 1px; overflow: hidden; font-size: 0pt; margin-top: -1px; } </style> </head> <body> <div class="box"> <div class="left">Tree</div> <div class="right">View</div> <div class="right">View</div> <div style="width: <=100% getTreeWidth()100 %>">Tree</div> <div class="clear" /> </div> <div class="ColumnWrapper"> <div class="Colum­nOne­Half">Tree</div> <div class="Colum­nOne­Half">View</div> </div> </body> </html>

看看这个解决方案

.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>

使用钙:

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

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

使用flexbox这是相当容易的。请参阅下面的代码片段。我添加了一个包装容器来控制流和设置全局高度。还添加了边界以标识元素。注意,div现在也会根据需要展开到全高度。 在现实场景中,应该为flexbox使用供应商前缀,因为它还不完全受支持。

我开发了一个免费的工具来理解和设计使用flexbox的布局。看看这里: http://algid.com/Flex-Designer

.container { 身高:180 px; 边框:3px实心#00f; 显示:flex; 对齐项目:伸展; } div { 显示:flex; 边框:3px solid #0f0; } 接着{ 显示:flex; flex-grow: 1; 边框:3px实体#f00; } < div class = "容器" > < div > < / div >树 < < div class = "第二”>视图/ div > < / div >

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 >