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

用于display:table-cell;childdiv's和 adisplay:table用于 parent divid container。

这会将 div 对齐在一条线上，保持另一个 div 的相对宽度以填充。

这是工作示例

的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;}

Answer 2

你必须添加浮动：左；

示例：http : //jsfiddle.net/nDnqn/

CSS：

#div1, #div2, #div3 {
    float: left;
}

Answer 3

试试这个... http://jsfiddle.net/3XPkT/

基本上，如果您准备将第一列包装在第二列中，那么它就相当简单了

<div id='container'>
  <div id='div2'>
    <div id='div1'>Col 1</div>
    Col 2
  </div>
  <div id='div3'>Col 3</div>
  <div id="footer">Footer</div>
</div>

和CSS...

#div1{background:#999;width:300px;float:left}
#div2{background:#bbb;width:50%;float:left}
#div3{background:#ddd;width:50%;float:left}
#footer{clear:both;}

还有其他技巧，例如使用绝对定位，但这会破坏您要添加的任何页脚。

如果左边的栏很短，你可能会遇到一些小困难——中间栏的内容会包裹在下面——但如果需要的话，可以通过一点javascript来解决。