Скажем, у меня такая ситуация: http://jsfiddle.net/BL3M7/:
HTML:
<div class="block" style="height: 50px">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
CSS:
.block {
height: 100px;
width: 30%;
border: 1px solid black;
display: inline-block;
vertical-align: top;
float: left;
}
Я хочу, чтобы блок 4 был выровнен как можно ближе к блоку 1. Конечно, я мог бы просто использовать margin-top
например http://jsfiddle.net/BL3M7/2/, но я не могу этого сделать, потому что размеры и ширина размеров блоков варьируются от страницы к странице. Итак, можно ли добиться такого эффекта без margin
?
Если вы с удовольствием попробуете решение CSS3, вы можете использовать счетчик столбцов для достижения чего-то подобного?
Эта техника будет работать сверху вниз, а не слева направо, поэтому будьте осторожны с порядком вашего содержимого HTML.
Я добавил контейнер к вашему коду:
<div class="block-container">
<div class="block" style="height: 50px">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
</div>
Затем некоторые CSS
.block-container {
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 100%;
}
.block {
display: inline-block;
margin-bottom: 20px;
width: 100%;
height: 100px;
border: 1px solid black;
}
ПРИМЕЧАНИЕ. К сожалению, это не будет работать в IE9 и ниже. Возможно, вам понадобится резерв JS, если вы хотите его поддержать.
К сожалению, это невозможно сделать с помощью только css. Но есть отличные решения Javascript, которые делают именно то, что вы хотите!
Посмотрите: http://masonry.desandro.com/
или если вам нужны еще несколько вариантов: http://isotope.metafizzy.co/