Div'вы в две колонки?

Question

[theSever]

Нужно расположить дивы в две колонки, то есть имеем

<div class="table">
<div class="column"><img src="images/487280612_4.jpg" height="100" alt="post image" /><strong>Заголовок</strong></div>
<div class="column"><img src="images/487280612_4.jpg" height="100" alt="post image" /><strong>Заголовок</strong></div>
<div class="column"><img src="images/487280612_4.jpg" height="100" alt="post image" /><strong>Заголовок</strong></div>
<div class="column"><img src="images/487280612_4.jpg" height="100" alt="post image" /><strong>Заголовок</strong></div>
<div class="column"><img src="images/487280612_4.jpg" height="100" alt="post image" /><strong>Заголовок</strong></div>
</div>

Нужно чтобы в верстке расположились эти дивы в две колонки на странице.

Answer 1

[Сергей delphinpro]

id = уникальный идентификатор! Единственный на странице.
нужно поменять на класс class="column"

#table {
  display: flex;
  flex-flow: row wrap;
}
.column {
  flex: 1 0 50%;
}

Comments

[theSever]

Ага, спасибо

Answer 2

[Григорий]

Можно так просто, но результат может быть не тот, что нужен:

#table {
 column-count: 2;
}

Comments

[theSever]

Верстка течет, то есть делится на два колонки, то текст съезжает.

[Григорий]

Это потому, что для текста предназначено такое. Тогда только вариант ниже (с width=50) подойдёт.

Answer 3

[Александр Филиппенко]

Способов куча. Например

#table {font-size: 0;}
#column {display: inline-block; width: 50%;}

Правда использовать один и тот же айдишник несколько раз - неправильно, но работать будет.

Comments

[theSever]

Та же ситуация что и с примером от прошлого коментатора, верстка течет, то есть картинка отдельно от текста, а нужно чтобы как в табличной верстке, жесткие колонки, тоесть картинка под ней текст и чтобы не куда не убегал.

[Александр Филиппенко]

Можно пример глянуть? Не совсем пойму что значит "течёт".