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

时间:2012-06-20 13:20:28

标签: css html

我正在处理一个页面,它有三个div,彼此相邻,每个div都有相同的高度。是否可以让第一个和第三个div具有固定宽度(比如175px),并且让中间div将其宽度调整到剩余空间(并且可以在窗口宽度变化时调整大小)?我知道只需要两个div即可完成,但这个场景有三个可行吗?

2 个答案:

答案 0 :(得分:14)

假设您的标记类似于;

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

答案 1 :(得分:2)

当然,只需将两侧柱div向左和向右漂浮,使中心div边距等于柱的宽度(如果最终结束时保持宽度受限)高于任何一方),它应该像你说的那样工作。见这里:http://jsfiddle.net/Q8eVz/