Сделайте несколько div-элементов переменной высоты встроенными, сохраняя контейнер фиксированной ширины

Question

Вот эскиз: http://jsfiddle.net/jondum/efVjj/20/

Цель состоит в том, чтобы каждый из этих элементов был в одной строке.

Если я добавлю фиксированную высоту к каждому из них, это будет работать, но я бы хотел избежать явной высоты для каждого элемента.

Итак, как мне получить эти пиджаков на одной линии?

Answer 1

Если вы хотите, чтобы они располагались на одной строке горизонтально, вы можете попробовать использовать display: inline-block с white-space: nowrap на родительском элементе, чтобы блоки были на одной строке: http://jsfiddle.net/kizu/efVjj/26/

Answer 2

Один из вариантов - использовать абсолютное позиционирование.

`

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

Answer 3

Вы установили ширину родительского контейнера в 400 пикселей, а три дочерних элемента делятся в 400 пикселей. 400 x 3 = 1200. Установите ширину родительского контейнера как минимум в размере его дочерних элементов.

.main-container
{
    width: 1200px;
}