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

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

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

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


不可重复声明:

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


当前回答

使用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 >

其他回答

使用钙:

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

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

一个稍微不同的实现,

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

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

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

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

如果另一列的宽度是固定的,那么如何使用适用于所有常见浏览器的calc CSS函数:

width: calc(100% - 20px) /* 20px being the first column's width */

这样,第二行的宽度将被计算(即剩余宽度)并响应地应用。