使多个可变高度的 div 内联，但保持固定宽度的容器

Question

草图如下： http://jsfiddle.net/jondum/efVjj/20/

目标就是让每个 div 都在同一行。

如果我为每个元素添加固定高度，它似乎可以工作，但我想避免在每个元素上设置显式高度。

那么我怎样才能让这些家伙都在同一条线上呢？

Answer 1

如果你想让它们水平排列在一行上，你可以尝试在父级上使用 display: inline-block 和 white-space: nowrap ，这样块就会是一行： http://jsfiddle.net/kizu/efVjj/26/

Answer 2

您已将父容器的宽度设置为 400 像素，将三个子 div 的宽度分别设置为 400 像素。
400 x 3 = 1200。将父容器的宽度设置为至少为其子元素的大小。

.main-container
{
    width: 1200px;
} 

Answer 3

一种选择是使用绝对定位。

`

<div class="element" style="background:blue;position:absolute;left:0px;">


    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</div>

<div class="element" style="background:green;position:absolute;left:400px;">

  <br/><br/><br/><br/><br/><br/><br/><br/>

</div>

<div class="element" style="background:red;position:absolute;left:800px;">

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</div>

.main-container
{
    width: 1200px;
    overflow:hidden;
} 

.element {
    float:left;
    width: 400px;
}