Динамические столбцы / строки

Question

Интересно - кто-нибудь знает какие-нибудь хорошие статьи, объясняющие технику CSS, позволяющую нескольким экземплярам класса течь вниз по странице относительно элементов над ней? Не очень хорошо это объясняю.

Veerle 'Pierter делает это на этой странице: http://veerle.duoh.com/belgiangraphicdesign Хотя я не уверен, что хочу использовать такую ​​же технику, как у нее, которая требует ввода высоты на элемент через ее установку EE.

Я сделал небольшую иллюстрацию того, что я пытаюсь достичь;

Ключ в том, что мне нужна надежная техника для этого. Что-то, где разметка может быть такой простой, как;

<div class="box">
  Number 1
</div>
<div class="box">
  Number 2
</div>
<div class="box">
  Number 3
</div>
<div class="box">
  Number 4
</div>
<div class="box">
  Number 5
</div>
...

Любил бы любые указатели в правильном направлении.

Answer 1

Как уже отмечали другие, используя только CSS, вы можете сгруппировать блоки в столбцы. К сожалению, это не будет хорошо выглядеть, если ваш контент динамический, и вы не знаете высоты всех блоков (ваши столбцы могут иметь разную длину). Если вы хотите рассчитать высоту ящиков, чтобы правильно их расположить, вам придется использовать Javascript. Нет ничего плохого в использовании Javascript - это правильный инструмент для этой работы!

Что касается реализации, логика будет выглядеть примерно так: начните с добавления первых 4 полей, по одному в верхней части каждого столбца. Затем следите за общей высотой каждого столбца, используя свойство clientHeight в Javascript, и для каждого нового поля, которое вы хотите добавить; просто добавьте его в конец самого короткого столбца с помощью appendChild ().

Если вы решили использовать jQuery, я могу порекомендовать плагин с именем jQuery Masonry .

Answer 2

Она не устанавливает высоту для этих ящиков.

Jquery динамически позиционирует каждую рамку, и, насколько я знаю, это единственный способ добиться этого эффекта с помощью разметки, которую вы описываете в своем посте.

Если вы не хотите использовать решение javascript, единственный способ сделать это - иметь столбцы-обертки, но это резко изменит вашу разметку.

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

Answer 3

Она добивается этого, позиционируя коробки абсолютно.

Но вы можете достичь этого с помощью очень простого CSS, при условии, что вы можете контролировать порядок, в котором элементы отображаются.
Вы должны сгруппировать их в столбцы (и не в строках, как обычно), но он работает как шарм.

Используйте HTML так:

<span class="column">
  <div class="box">number 1<br />with two lines</div>
  <div class="box">number 4</div>
  <div class="box">number 7<br />with two  lines</div>
</span>
<span class="column">
  <div class="box">number 2</div>
  <div class="box">number 5<br />with two  lines<br />or even three<br />or four!</div>
  <div class="box">number 8</div>
</span>
<span class="column">
  <div class="box">number 3</div>
  <div class="box">number 6</div>
  <div class="box">number 9</div>
</span>

И CSS так:

.column {
    clear: left;
    width: 25%;
    display: inline-block;
    vertical-align: top;
}
.box {
    border: solid 1px blue;
}

Протестируйте его на JSFiddle.net .
Используйте span для столбцов, поскольку IE7 не принимает display: inline-block; для элементов, которые естественным образом блокируют элементы.(Мех.)