Вертикальное выравнивание div'ов разделенных на два столбца

Question

[Александра Травкина]

Доброго времени суток, я конечно понимаю, что я тупая и на мой вопрос наверняка есть простой ответ, который я не могу найти, но будьте так добры, подскажите, как в такой структуре:

<div class="container">
	<div class="row">
		<div class="post"><?php get_template_part( 'post-formats/standard' ); ?></div>
        </div>
</div>

Которая, соответственно отображает посты один за другим, которые в свою очередь, естественно, разной длинны из-за разного содержимого... Так вот, div row имеет ширину 50%, следовательно посты отображаются в две колонки. Как сделать так, что бы у div post не было между ними пустых пробелов, появляющихся из-за разной высоты блоков:

Answer 1

[Z Sh]

Не уверен что поможет, но попробуйте в css написать:

.row{
display:table}
.row>div{
display:table-cell;
width:50%}

Comments

[Александра Травкина]

Все блоки стали отображаться в одну горизонтальную строку.

[Z Sh]

Я так понял у вас проблема с высотой блоков, она у каждого элепмента получается зависимой от содержимого. Есть несколько способов сделать их равными, вот некоторые www.xiper.net/collect/html-and-css-tricks/karkas-v...

Answer 2

[lnked]

<div class="container">
    <div class="row">
    	<div class="post"></div>
    	<div class="post"></div>
    	<div class="post"></div>
    </div>
    <div class="row">
    	<div class="post"></div>
    	<div class="post"></div>
    	<div class="post"></div>
    </div>
</div>

Сделайте изначально 2 колонки делите код между ними тогда не будет пробелов

Comments

[Александра Травкина]

Было бы здорово, но я же не в ручную пишу. CMS'ка Wordpress выводит топики функцией get_posts.

[lnked]

@cuteshy попробуйте использовать эту библиотку masonry.desandro.com