展开一个 div 以填充剩余的宽度

你可以试试CSS Grid Layout。

DL {显示：网格；网格模板列：最大内容自动； } dt { 网格列：1； } dd { 网格列：2；边距：0；背景颜色：#ccc； }

lorem ipsum

dolor sit amet

carpe

diem

flex-grow - 这定义了弹性项目在必要时增长的能力。它接受用作比例的无单位值。它规定了项目应该占用的弹性容器内的可用空间量。

如果所有项目都将 flex-grow 设置为 1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为 2，则剩余空间将占用其他空间的两倍（或者它会尝试，至少）。查看更多here

.parent { 显示：弹性； } .child { 弹性增长：1； // 它接受一个作为比例的无单位值 } .left { background: red; } .right { 背景：绿色； }

我不确定这是否是您期望的答案，但是，为什么不将 Tree 的宽度设置为“auto”，将“View”的宽度设置为 100% 呢？

一个稍微不同的实现，

两个 div 面板（内容+额外）并排，如果 extra panel 不存在，content panel 会展开。

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

帕特 - 你是对的。这就是为什么这个解决方案会同时满足“恐龙”和同时代人的原因。 :)

.btnCont { 显示：表格布局；宽度：500px； } .txtCont { 显示：表格单元格；宽度：70%；最大宽度：80%；最小宽度：20%； } .subCont { 显示：表格单元格；宽度：30%；最大宽度：80%；最小宽度：20%； }

您可以使用 W3 的 CSS 库，其中包含一个名为 rest 的类，该类就是这样做的：

不要忘记在页面的 header 中链接 CSS 库：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

这是官方演示：W3 School Tryit Editor

使用 flexbox 相当容易。请参阅下面的片段。我添加了一个包装容器来控制流量并设置全局高度。还添加了边框以识别元素。请注意，div 现在也根据需要扩展到全高。供应商前缀应该用于真实场景中的 flexbox，因为尚未完全支持。

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

.container{ 高度：180px;边框：3px 实心#00f；显示：弹性；对齐项目：拉伸； } div { 显示：弹性；边框：3px 实心#0f0； } .second { 显示：弹性；弹性增长：1；边框：3px 实心#f00; }

查看可用的 CSS 布局框架。我会推荐 Simpl 或者稍微复杂一点的蓝图框架。

如果您使用的是 Simpl（仅涉及导入一个 simpl.css 文件），您可以这样做：

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

，对于 50-50 布局，或：

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

, 对于 25-75 的一个。

就是这么简单。

感谢 Simpl.css 的插件！

记得像这样将所有列包装在 ColumnWrapper 中。

<div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
</div>

我即将发布 Simpl.css 的 1.0 版，所以请帮助宣传！

我编写了一个从 jQuery $(document).ready() 调用的 javascript 函数。这将解析父 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>