Question

看看this fiddle。我的两边都有div，固定宽度为50px，display:inline-block。

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

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

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

我尝试使用CSS3的calc，但似乎是isn't very well supported。

Answer 1

这是过去使用表格进行布局处理的情况。新的Flexbox实施https://developer.mozilla.org/en-US/docs/CSS/Flexbox

将在未来修复此问题

在此期间，您可以使用display：table-cell模拟表格效果，这将导致每个div按照您期望的表格方式进行拉伸。如果您想要更多地控制总宽度，可以将它包装在具有display：table-row和set width的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/

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

2 个答案: