Компактное расположение DIV в двух направлениях

Question

DIV-файлы легко расположить горизонтально с помощью поплавка. Например:

<div style="width: 500px;">
 <div style="float:left; width: 200px; height: 100px; background-color:Yellow;"></div>
 <div style="float:left; width: 150px; height: 60px; background-color:Blue;"></div>
 <div style="float:left; width: 140px; height: 240px; background-color:Green;"></div>
 <div style="float:left; width: 180px; height: 200px; background-color:Red;"></div>
 <div style="float:left; width: 130px; height: 160px; background-color:Purple;"></div>
</div>

Это даст:

Но как расположить DIV по горизонтали и вертикали? В этом случае, как переместить красный и фиолетовый DIV вверх, где есть свободное место (под желтым и синим DIV)?

ПРИМЕЧАНИЕ: Это всего лишь пример, и я хотел бы найти метод для организации любого набора DIV (не только в этом типичном примере).

Answer 1

Предполагая, что вы работаете с динамическим набором объектов произвольного размера, для этого не существует чистого метода CSS.Вы можете приблизиться, используя многостолбцовый макет CSS3, если:

1. Вам необходимо только поддерживать современные браузеры.
2. Все объекты можно объединить в группы одинаковой высоты.*

Здесь объекты располагаются группами высотой 300 пикселей.

<div id="blocks">
  <div style="height: 100px; background-color: yellow;"></div>
  <div style="height: 200px; background-color: blue;"></div>
  <div style="height: 300px; background-color: green;"></div>
  <div style="height: 200px; background-color: red;"></div>
  <div style="height: 160px; background-color: purple;"></div>
</div>

#blocks {
  -moz-column-count: 3;
  -moz-column-gap: 0;
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  column-count: 3;
  column-gap: 0;
  width: 450px;
}
#blocks div {
  width: 150px;
}

http://jsfiddle.net/RTLun/

Answer 2

Для упорядочивания div по вертикали вы можете использовать плагин jquery masonry

Это имеет такой эффект:

Этот плагин очень прост в использовании:

    $(function(){
      $('#container').masonry({
        // options
        itemSelector : '.item',
      });
    });

и это живое демо показало, как это работает в вашем примере

Answer 3

вы можете использовать position:absolute css свойство вместе с top, left для достижения того же.

<div style="width: 500px;">
 <div style="position:absolute; width: 200px; height: 100px; background-color:Yellow;"></div>
 <div style="position:absolute; left:200px; width: 150px; height: 60px; background-color:Blue;"></div>
 <div style="position:absolute;left:350px; width: 140px; height: 240px; background-color:Green;"></div>
 <div style="position:absolute;top:100px; width: 180px; height: 200px; background-color:Red;"></div>
 <div style="position:absolute; left:200px;top:60px;width: 130px; height: 160px; background-color:Purple;"></div>
</div>

Live demo

Answer 4

Вы можете сделать это без манипулирования разметкой следующим образом:

<div style="width: 500px;">
 <div style="float:left; width: 200px; height: 100px; background-color:Yellow;"></div>
 <div style="float:left; width: 150px; height: 60px; background-color:Blue;"></div>
 <div style="float:right; width: 140px; height: 240px; background-color:Green;margin-right:10px"></div>
 <div style="float:left; width: 180px; height: 200px; background-color:Red;"></div>
 <div style="float:left; width: 130px; height: 160px; background-color:Purple;margin-top:-40px;margin-left:20px"></div>
</div>

Проверьте скрипку

http://jsfiddle.net/E6VkW/

Answer 5

Или, если вы не большой поклонник абсолютного позиционирования (как я), попробуйте это:

<div style="width: 500px;">
    <div style="float: left;">
        <div id="yellow"></div>
        <div id="red"></div>
    </div>
    <div style="float: left;">
        <div id="blue"></div>
        <div id="purple"></div>
    </div>
    <div id="green"></div>
</div>

С соответствующим CSS:

#red {
    width: 180px;
    height: 200px;
    background-color: Red;
}

#yellow {
    width: 200px;
    height: 100px;
    background-color: Yellow;
}

#blue {
    width: 150px;
    height: 60px;
    background-color: Blue;
}

#green {
    float: left;
    width: 140px;
    height: 240px;
    background-color: Green;
}

#purple {
    width: 130px;
    height: 160px;
    background-color: Purple;
}

Здесь Небольшая демка.