css - 如何将内容 div 夹在两个固定宽度的列之间

Question

看看这个小提琴。我在两边都有 div，固定宽度为 50 像素，并且display:inline-block.

我希望内部的 div 扩展以填补这两个 div 之间的空白，但问题是如果我在这个 div 中放置大量文本，它会将自身推到下一行，并且布局会崩溃。

另外，我想要它，所以即使中间有少量文本（小于页面宽度），中间 div 也会填充空间。

如何确保左右 div 始终位于左右两侧，并且内容 div 始终填充它们之间的空间？

我尝试使用 CSS3 的calc，但它似乎没有得到很好的支持。

Answer 1

如果您愿意使用 javascript，这将起作用：

​$(function(){
    $('div.middle').width( $('div.container').width() - $('div.right.col').width() - $('div.left.col').width() - 10 );

    $(window).resize(function() {
        $('div.middle').width( $('div.container').width() - $('div.right.col').width() - $('div.left.col').width() - 10 );
    });

});

工作 JSFiddle：http: //jsfiddle.net/vh8Zu/

Answer 2

这是过去通过使用表格进行布局来处理的那种情况。这将在未来通过新的 Flexbox 实现来修复https://developer.mozilla.org/en-US/docs/CSS/Flexbox

同时，您可以使用 display: table-cell 来模拟表格效果，这将导致每个 div 以您期望表格的方式拉伸。如果您想更好地控制总宽度，可以将其包装在具有 display: table-row 和设置宽度的 div 中。

.col {
    background-color:#333;
    color:#EEE;
    width:50px;
    display:table-cell;
}
.middle {
    background-color:#EEE;
    color:#333;
    display:table-cell;
}