可调整宽度div夹在两个固定宽度的div之间

我正在制作一个页面，每个页面有三个div，每个高度相同。有可能有第一个和第三个div是一个固定宽度（比如175px），并让中间div将其宽度调整为剩余空间（并且可以在窗口宽度更改时调整大小）？我知道它可以用两个div来完成，但是这种情况下有三种可行的方案吗？可调整宽度div夹在两个固定宽度的div之间

来源

2012-06-20 Anthony C.

假设你有类似的标记;

<div id="leftCol"></div> 
<div id="rightCol"></div> 
<div id="centerCol"></div>

你可以用CSS这样做;

#leftCol {float: left; width: 175px;} 
#rightCol {float: right; width: 175px;} 
#centerCol {overflow: hidden;}

请参阅jsFiddle; http://jsfiddle.net/meSHp/

来源

2012-06-20 14:22:48

当然，解决方案比我想象的要简单得多......这是件好事！谢谢！你和Brian都有相同的答案，但我接受这个答案，因为它在这个页面上更详细，并且可以更快地帮助其他人解决同一个问题。但是，感谢你们两位！ :) –

+1！我试图以非常复杂的方式做到这一点。 – SVS

谢谢！当我发现溢出：隐藏的技巧，它完全改变了我对CSS布局的方法。当然，如果你有想要溢出容器的东西，它可能会产生负面影响，但是对于很多布局而言，情况并非如此。 –

当然，只是浮动两边的列div s左右，给你的中心div边距等于列的宽度（以保持宽度约束，如果它结束比任何一边高），它应该像你说的那样工作。见这里：http://jsfiddle.net/Q8eVz/。

来源

2012-06-20 14:07:49

可调整宽度div夹在两个固定宽度的div之间

回答

相关问题