Alignin div как pinterest

Question

Я искал несколько вещей, но я просто не смог найти ответ. Может быть, вы могли бы помочь мне.

Я хочу выровнять элементы div, как на Pinterest. Не все divs имеют одинаковую высоту, но ширина желоба остается неизменной. Я что-то проектирую, и я тоже хотел бы запрограммировать его.

Вот образ того, что я имею в виду, для уточнения: http://nl.tinypic.com/r/ekkkte/8

Graphicburger.com использует ту же самую вещь, которую я имею в виду сделать. Я просто хочу знать, как можно выровнять его контент.

Answer 1

Ну, одним из способов достижения этого является использование Masonry. Я думаю, что это то, что Pinterest фактически использует для своего макета. Это также происходит при работе с jQuery, если вы используете это. Если вы ищете больше на теории за этим, проверить this link

Ниже приведен демонстрационный код из масонства плагин/библиотеки ссылка:

HTML

<div id="container"> 
    <div class="item">...</div> 
    <div class="item w2">...</div> 
    <div class="item">...</div> 
    ... 
</div> 

<script src="/path/to/masonry.pkgd.min.js"></script> 

CSS

.item { width: 25%; } 
.item.w2 { width: 50%; } 

Javascript

var container = document.querySelector('#container'); 
var msnry = new Masonry(container, { 
    // options 
    columnWidth: 200, 
    itemSelector: '.item' 
}); 

Answer 2

я ответил очень аналогичный пост несколько дней назад .. с образцом кода HTML и CSS: How to create grid position elements like in this image css

ума, чтобы посмотреть?