Floating div issue

Question

У меня проблема с плавающими div. У меня есть контейнер st до фиксированной ширины, и у меня есть дочерние элементы внутри того, что есть все элементы div. Я хочу, чтобы мне нужно было отображать две строки подряд. Код, который я написал, выглядит следующим образом.

CSS

#container 
    { 
     width: 400px; 
    } 
    .item1 
    { 
     width: 180px; 
     height: 200px; 
     border: 1px solid red; 
     float: left; 
     margin: 10px 0 0 10px; 
    } 
    .item2 
    { 
     width: 180px; 
     height: 250px; 
     border: 1px solid red; 
     float: left; 
     margin: 10px 0 0 10px; 
    } 

HTML

<div id="container"> 
     <div class="item1">1</div> 
     <div class="item1">2</div> 
     <div class="item1">3</div> 
     <div class="item1">4</div> 
     <div class="item1">5</div> 
     <div class="item1">6</div> 
     <div class="item1">7</div> 
     <div class="item1">8</div> 
     <div class="item1">9</div> 
    </div> 

Это можно посмотреть на Demo1

Но то, что я хочу, как этот result. Единственное, что высота отдельных предметов может быть разной.

Надеюсь, что я все понял.

Заранее спасибо

Дополнительные разъяснения

Элементы контента будут генерироваться динамически в сервере и будет передан клиенту.

Кроме того, порядок должен быть как 1,2,3,4, ...

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

Answer 1

Вы не можете выполнить это только с помощью CSS, но есть плагин jQuery, чтобы сделать трюк. Это называется jQuery Masonry, дайте ему попробовать

Answer 2

Вам нужна вторая обертка:

<div id="container"> 
     <div class="wrapper"><div class="item1">1</div></div> 
     <div class="wrapper"><div class="item1">2</div></div> 
     ... 
</div> 

Float обертку и дать ему фиксированный размер. Элементы внутри могут иметь собственную высоту.

Я предпочитаю использовать списки для этого типа вещей. Лучшая семантика HTML.

<div class="container"> 
    <ul> 
     <li><div class="item1">1</div></li> 
     <li><div class="item2">2</div></li> 
    </ul> 
</div> 

стиль:

.container ul { 
    width:400px; 
} 

.container li { 
    float:left; 
    height:200px; 
    width:180px; 

} 

Answer 3

вы указываете ст.2 быть 10 пикселей шире, чем item1, так что я не совсем уверен, что вы пытаетесь сделать ....

Answer 4

Если вы хотите, каждая пара элементов, чтобы быть в ряду, и у вас есть контроль над динамической генерации контента, просматривать мои правки в свой скрипку here

Резюмируя:

Markup -

<div id="container"> 
    <div class="itemrow"> 
     <div class="item1">1</div> 
     <div class="item1">2</div> 
    </div> 
    <div class="itemrow"> 
     <div class="item2">3</div> 
     <div class="item1">4</div> 
    </div> 
    <div class="itemrow"> 
     <div class="item2">5</div> 
     <div class="item1">6</div> 
    </div> 
    <div class="itemrow"> 
     <div class="item1">7</div> 
     <div class="item2">8</div> 
    </div> 
    <div class="itemrow"> 
     <div class="item1">9</div> 
    </div> 
</div> 

CSS -

#container 
    { 
     width: 400px; 
    } 
    .itemrow 
    { 
     float: left; 
     clear: both; 
    } 
    .item1 
    { 
     width: 180px; 
     height: 200px; 
     border: 1px solid red; 
     float: left; 
     margin: 10px 0 0 10px; 
    } 
    .item2 
    { 
     width: 190px; 
     height: 250px; 
     border: 1px solid red; 
     float: left; 
     margin: 10px 0 0 10px; 
    } 

Edit: Просто прочитайте приведенный выше комментарий о необходимости редактировать логику на стороне сервера для рендеринга. Очевидно, это будет работать, только если вы сможете это контролировать.