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

Question

我正在处理一个页面，该页面具有三个彼此相邻的 div，每个 div 的高度相同。是否可以让第一个和第三个 div 具有固定宽度（例如 175px），并让中间 div 将其宽度调整为剩余空间（并且可以在窗口宽度改变时调整大小）？我知道它可以只用两个 div 来完成，但是这个场景用三个可行吗？

score 14 · Accepted Answer

假设您有类似的标记；

<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/

score 2 · Accepted Answer

当然，只需将两侧的列浮动div到左侧和右侧，使您的中心div边距等于列的宽度（如果它最终比任何一侧都高，以保持宽度受到限制），它应该像你一样工作说。见这里：http: //jsfiddle.net/Q8eVz/。

2 回答 2