Расположение блоков?

Question

[niks_88]

Есть вот такая страничка.

Не получается сделать чтоб блоки поджимались верх к предыдущему.

.albums {
width:280px;
float:left;
margin-top:5px;
margin-right:15px;
margin-bottom:15px;
cursor:pointer;
line-height:2.1em;
}
.albums .title {
float:right;
font-size:22px;
color:#5F1E61;
text-align:center;
width:298px;
}
.albums .img {
width:278px;
border:2px solid #5F1E61;
border-radius:8px 24px 8px 24px;
}

<div class="albums">
<a class="title" href="1.htm">Машины</a><br>
<img class="img" id="img" src="1.jpg">
</div>

<div class="albums">
<a class="title" href="1.htm">Наши</a><br>
<img class="img" id="img" src="2.jpg">
</div>

<div class="albums">
<a class="title" href="1.htm">Розовая</a><br>
<img class="img" id="img" src="3.jpg">
</div>

<div class="albums">
<a class="title" href="1.htm">f</a><br>
<img class="img" id="img" src="4.jpg">
</div>

<div class="albums">
<a class="title" href="1.htm">fdf</a><br>
<img class="img" id="img" src="5.jpg">
</div>

<div class="albums">
<a class="title" href="1.htm">o0-[</a><br>
<img class="img" id="img" src="6.jpg">
</div>

<div class="albums">
<a class="title" href="1.htm">,[]</a><br>
<img class="img" id="img" src="7.jpg">
</div>

<div class="albums">
<a class="title" href="1.htm">mk</a><br>
<img class="img" id="img" src="8.jpg">
</div>

Comments

[niks_88]

Всем большое спасибо. Вопрос решен.

Answer 1

[Роман]

научитесь гуглить
у вас флоаты, потому так и выравниваются блоки. подробнее читайте здесь habrahabr.ru/post/142486
тут либо использовать специальные бибиотеки, которые позволят вам сделать блоки в стык либо разбить контейнер на три "столбца"

и не добавляйте тегу img класс img. зачем эта избыточность?

Comments

[niks_88]

Спасибо.

Answer 2

[olamedia .]

на чистом css не выйдет, ищите яваскрипты по слову masonry

Comments

[niks_88]

Спасибо, но хочу без JS.

Answer 3

[R R]

https://github.com/desandro/masonry возможно то, что вам нужно

Comments

[niks_88]

Спасибо, но хочу без JS.

Answer 4

[Николай Шабалин]

Можете поиграться здесь
Поддержка вот такая. Можно сказать никакая =) Использовался только css свойство column.

Answer 5

[Никита Наумов]

сделайте проще:

для .albums display: inline-block; vetrical-align:top;

и все проблемы решатся