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

对{child} display:table-cell;使用div's，为父display:table ID div使用container。

这会将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;}

Answer 2

你必须添加float：left;

例如：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来解决。

对齐3个div一个div具有固定宽度

3 个答案: