css - 对齐 3 个 div，其中一个 div 具有固定宽度

Question

我想将同一行中的 3 个 div 与第一个具有固定宽度的 div 对齐。

<div id='container'>
<div id='div1' style='width:300px'> </div>
<div id='div2'> </div>
<div id='div3'> </div>
</div>

其他两个 div 填充剩余空间。

Answer 1

对子div's使用display:table-cell;，对父div使用display:table > id 容器。

这将使 div 在一行中对齐，同时保持另一个 div 的相对宽度来填充。

这是 WORKING EXAMPLE

HTML:

<div id="container">
<div id="div1" style="width:300px; background: gray;">&nbsp;</div>
<div id="div2" style="background: #cccccc;">&nbsp;</div>
<div id="div3" style="background: #eeeeee;">&nbsp;</div>
</div>

CSS:

#container{display:table; width:100%;}
#container div{display:table-cell;}