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

Question

看看这个小提琴 。 我在每一侧都有div，固定宽度为50px，并display:inline-block 。

我希望内部的div扩大以填充这两个div之间的间隙，但是问题是，如果我在该div内放了很多文本，它将自身推到下一行，并且布局崩溃了。

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

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

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

Answer 1

这是过去使用表格进行布局处理的情况。 以后将通过新的Flexbox实施方式对此问题进行修复：https：//developer.mozilla.org/en-US/docs/CSS/Flexbox

同时，您可以使用display：table-cell来模拟表格效果，这将导致每个div扩展您希望表格使用的方式。 如果要对总宽度进行更多控制，可以将其包装在具有以下显示的div中：表格行和设置的宽度。

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

Answer 2

如果您愿意使用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/