我想要一个两列div布局，其中每一个都可以有可变的宽度。
div { 浮:左; ｝ 接着{ 背景:# ccc; ｝ < div > < / div >树 < < div class = "第二”>视图/ div >
我想要“视图”div扩展到整个可用的宽度后，“树”div已经填补了所需的空间。
目前，我的“视图”div被调整为它所包含的内容 如果两个跳水都占据整个高度也会很好。
不可重复声明:
当设置float:left时，将div扩展到最大宽度 因为左边的宽度是固定的。 帮助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 >
其他回答
一个稍微不同的实现，
两个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="ColumnOneHalf">Tree</div> <div class="ColumnOneHalf">View</div> </div> </body> </html>
我写了一个javascript函数，从jQuery $(document).ready()调用。这将解析父div的所有子div，只更新最右边的子div。
html
...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....
javascript
$(document).ready(function(){
stretchDivs();
});
function stretchDivs() {
// loop thru each <div> that has class='stretch'
$("div.stretch").each(function(){
// get the inner width of this <div> that has class='stretch'
var totalW = parseInt($(this).css("width"));
// loop thru each child node
$(this).children().each(function(){
// subtract the margins, borders and padding
totalW -= (parseInt($(this).css("margin-left"))
+ parseInt($(this).css("border-left-width"))
+ parseInt($(this).css("padding-left"))
+ parseInt($(this).css("margin-right"))
+ parseInt($(this).css("border-right-width"))
+ parseInt($(this).css("padding-right")));
// if this is the last child, we can set its width
if ($(this).is(":last-child")) {
$(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
} else {
// this is not the last child, so subtract its width too
totalW -= parseInt($(this).css("width"));
}
});
});
}
如果两个宽度都是可变长度，为什么不用一些脚本或服务器端计算宽度呢?
<div style=“width： <=% getTreeWidth（） %>”>Tree</div>
<div style="width: <=% getViewWidth() %>">View</div>
使用钙:
.leftSide { 浮:左; 宽度:50 px; 背景颜色:绿色; ｝ .rightSide { 浮:左; 宽度:calc(100% - 50px); 背景颜色:红色; ｝ < div风格= "宽度:200 px”> < div class = " leftSide " > < / div > < div class = " rightSide“b > < / div > < / div >
这样做的问题是，所有宽度都必须显式定义，要么作为值(px和em可以)，要么作为显式定义本身的内容的百分比。
