Question

这是草图：http://jsfiddle.net/jondum/efVjj/20/

目标是让每个div都在同一条线上。

如果我为它们中的每一个添加一个固定的高度，它似乎可以工作，但我想避免在每个元素上设置一个明确的高度。

那么如何将这些虫子全部放在同一条线上呢？

Answer 1

如果您希望将它们水平放在一行，您可以尝试在父级上使用display: inline-block和white-space: nowrap，因此这些块将位于一行：http://jsfiddle.net/kizu/efVjj/26/

Answer 2

您已将父容器的宽度设置为400px，并将三个子div设置为400px。 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;
}

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

3 个答案: