Совместите блоки друг с другом как можно ближе

0

Скажем, у меня такая ситуация: 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?

  • 0
    Если вы добавите height: auto в класс .block, они будут как можно ближе, но я не уверен, что они соответствуют вашим требованиям. jsfiddle.net/BL3M7/6
Теги:

2 ответа

1

Если вы с удовольствием попробуете решение 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;
}

DEMO

ПРИМЕЧАНИЕ. К сожалению, это не будет работать в IE9 и ниже. Возможно, вам понадобится резерв JS, если вы хотите его поддержать.

0

К сожалению, это невозможно сделать с помощью только css. Но есть отличные решения Javascript, которые делают именно то, что вы хотите!

Посмотрите: http://masonry.desandro.com/

или если вам нужны еще несколько вариантов: http://isotope.metafizzy.co/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню