Bourbon Neat - Как сделать автоматические колонки?

Я создаю веб-сайт с помощью Bourbon Neat, и мне нужно расположить столбцы следующим образом:

аккуратные столбцы

Любые идеи о том, как написать код?

я пробовал

.column {
  @include span-columns(1);
  @include omega(2n)
}

но все столбцы имеют одинаковую высоту. И мне нужна разная высота.

Заранее спасибо.


bourbon neat
person byubay    schedule 27.01.2014    source источник
comment
Каков порядок потока, который вы хотите на скриншоте, который вы разместили? Что идет после красного в разметке, зеленого или желтого?   -  person Reda Lemeden    schedule 28.01.2014
comment
Далее идет зеленый. Потом желтый, потом синий.   -  person byubay    schedule 28.01.2014

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы получить это:

Результат кода

Ваш html должен выглядеть примерно так:

<div class = 'content'>
  <div class = 'short-column' id ='red'>
  </div>

  <div class = 'tall-column' id ='yellow'>
  </div>
</div>

<div class = 'content'>
  <div class = 'tall-column' id ='green' >
  </div>

  <div class = 'short-column' id ='blue'>
  </div>
</div>

И тогда ваш scss должен выглядеть так:

.content {
  @include outer-container;
  height: 20em;
  display: inline-block;
  width: 90px;
}

.tall-column {
  @include span-columns(1);
  height: 80%;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}

.short-column {
  @include span-columns(1);
  height: 20%;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}

Если сделать так, чтобы внешний блок контента отображал встроенный блок, столбцы будут располагаться друг над другом так, как вы этого хотите. Установите определенную высоту (в данном случае 20 em) для блока содержимого, затем установите высоту div короткого столбца и div высокого столбца, чтобы сумма была равна 100% (80% + 20% = 100% от 20 em в этом примере). .

person RSid    schedule 13.07.2014