Реализация столбцов в HTML / CSS

Question

У меня есть набор DIV, которые содержат текстовую информацию. Они все одинаковой ширины (может быть, 400 пикселей или около того), но разной высоты. По космическим причинам я хотел бы иметь два или три столбца этих DIV (что-то вроде раздела объявления о покупке в газете). Смотрите привлекательный ascii-art ниже:)

DIV1      DIV3
DIV1      DIV3
DIV1    
DIV1      DIV4
DIV1      DIV4
DIV1      DIV4
          DIV4   
DIV2      DIV4
DIV2

DIVs управляются javascript и меняют высоту во время загрузки страницы. Я также не должен менять их порядок (у каждого DIV есть заголовок, и они отсортированы по алфавиту).

Пока что я не нашел хорошего способа сделать это. Поток HTML слева направо, затем сверху вниз, но мне нужно сверху вниз, затем слева направо.

Я попробовал наивную реализацию таблицы с двумя столбцами, и DIV в одном столбце, а другая половина - в другом столбце. Имейте время, которое выглядит разумным (когда средняя высота DIV в каждом столбце приближается), другая половина выглядит ужасно.

Полагаю, если бы я был гуру javascript, я мог бы измерить DIV после их расширения, суммировать их, а затем переместить их из одного столбца таблицы в другой во время выполнения ... но это не в моих силах, и я Я не уверен, что это все равно возможно.

Есть предложения?

Спасибо

ОБНОВЛЕНИЕ:

Спасибо за комментарии. Очевидно, я плохо справился с вопросом: (

DIVs - это просто способ хранения / группировки подобного контента, который на самом деле не используется для разметки как таковой. Они все одинаковой ширины, но разной высоты. Я хочу просто выплюнуть их на странице, и волшебным образом :) сгруппировать их в две колонки, где высота двух колонок почти одинакова - как газетные колонки. Я не знаю, насколько высоки DIV, когда я начинаю, поэтому я не знаю, в какой столбец поместить каждый DIV (это означает, что если бы я знал их высоту, я бы разбил их на две ячейки таблицы, но я не т знаю). Таким образом, приведенный выше пример является простым примером - во время выполнения может оказаться, что DIV 1 больше, чем три других вместе взятых (в этом случае DIV2 должен всплыть наверху column2), или, возможно, DIV 4 окажется большой (в этом случае DIVs 1, 2 и 3 все будут в столбце 1, а DIV4 может быть один в столбце 2)

По сути, я надеялся, что есть способ создать два столбца, и содержимое магически будет перемещаться из столбца 1 в столбец 2 по мере необходимости (как это делает Word). Я подозреваю, что это не может быть сделано, но мои знания HTML / CSS довольно просты, так что, возможно ...?

Answer 1

Черновик Многостолбцовая модель CSS3 делает то, что вы хотите. Firefox поддерживает версии -moz некоторых свойств и версии Safari / Chrome -webkit ; Я не знаю о IE8 или Opera.

Answer 2

Вы можете обернуть div1 и div2 в оболочку div, а div 3 и div 4 - в оболочку div, а затем обернуть эти два во внешнюю оболочку. Используйте некоторые CSS, чтобы получить правильное форматирование, и вы должны быть в порядке. HTML может выглядеть примерно так:

<div class="wrap">
  <div class="col">
     <div>div1</div>
     <div>div2</div>
  </div>
  <div class="col">
     <div>div3</div>
     <div>div4</div>
  </div>
</div>

Затем, сделайте несколько таких вот css:

.wrap {
  position: relative;
  overflow: auto;
}
.col {
  float: left;
  width: 400px;
}

Это должно делать правильно.

Answer 3

можно ли интегрировать их в css-сетку, такую ​​как http://960.gs/?

Answer 4

DIVs управляются с помощью JavaScript

Ну, что бы вы ни имели в виду, покажите нам код. Если мы увидим, как DIV создаются вашим JS, мы, вероятно, увидим, как создать их по-другому.

Answer 5

ДЕЛАЙТЕ ЭТО С ТАБЛИЦАМИ.

Я начинаю использовать таблицы на работе, и, честно говоря? Делать эти вещи в CSS - беспорядок, и его гораздо сложнее отладить.

Answer 6

Используйте float, вот так:

<style>
.col1{
 width: 400px;
 height: 100px;
 float: left;
}
.col2{
 width: 400px;
 height: 150px;
 float: left;
}
.col3{
 width: 400px;
 height: 200px;
 float: left;
}
</style>
<div style="width: 1200px;">
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
</div>