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