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

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

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

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


不可重复声明:

当设置float:left时,将div扩展到最大宽度 因为左边的宽度是固定的。 帮助div -使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美元。

就是这么简单。

其他回答

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

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

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

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

这个问题的解决方法其实很简单,但一点也不明显。你必须触发一个叫做“块格式化上下文”(BFC)的东西,它以特定的方式与浮点数交互。

只需使用第二个div,删除浮动,并将其赋值为overflow:hidden。任何不可见的溢出值都会使它所设置的块成为BFC。bfc不允许后代浮体逃离它们,也不允许兄弟姐妹/祖先浮体入侵它们。这里的净效果是,浮动的div将做它的事情,然后第二个div将是一个普通的块,占用所有可用的宽度,除了浮动占用的宽度。

这应该适用于所有当前的浏览器,尽管你可能必须在IE6和7中触发hasLayout。我想不起来了。

演示:

固定左:http://jsfiddle.net/A8zLY/5/ 固定权限:http://jsfiddle.net/A8zLY/2/

div { 浮:左; } 接着{ 背景:# ccc; 浮:没有; 溢出:隐藏; } < div > < / div >树 < < div class = "第二”>视图/ 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 >

我写了一个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"));
            }
        });
    });
}