如何将内容div夹在两个固定宽度的列之间
如何将内容div夹在两个固定宽度的列之间
提问于 2012-08-04 20:30:03
看看this fiddle吧。两边都有div，宽度固定为50px，还有display:inline-block。
我希望内部的div扩展以填补这两个div之间的空白，但问题是，如果我在这个div中放入大量文本，它会将自己推到下一行，布局就会崩溃。
另外，我希望中间的div会填满空格，即使里面有少量的文本(小于页面宽度)。
如何确保左侧和右侧div始终位于左侧和右侧，并且内容div始终填充它们之间的空间？
我尝试使用css3的calc，但它似乎是isn't very well supported。
回答 2
Stack Overflow用户
发布于 2012-08-04 20:40:38
这是过去通过使用表格进行布局来处理的情况。这个问题将在未来由新的Flexbox实现https://developer.mozilla.org/en-US/docs/CSS/Flexbox解决
同时，您可以使用display: table-cell来模拟表格效果，这将使每个div以您期望的方式拉伸表格。如果您希望更好地控制总宽度，可以将其包装在一个div中，该div具有display: table-row和一个设置的宽度。
.col {
background-color:#333;
color:#EEE;
width:50px;
display:table-cell;
}
.middle {
background-color:#EEE;
color:#333;
display:table-cell;
}Stack Overflow用户
发布于 2012-08-04 20:47:48
如果您对使用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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11808694
复制相关文章
相似问题
腾讯云开发者
