Bourbon Neat - 如何做自动柱？

Question

我正在建立一个Bourbon Neat的网站，我需要安排这样的列：

关于如何编写代码的任何想法？

我试过

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

但所有列都具有相同的高度。我需要不同的高度。

提前谢谢。

Answer 1

要得到这个：

你的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;
}

使外部内容div显示内联块将按照您希望的方式将列堆叠在彼此之上。为内容div设置一个特定高度（本例中为20em），然后将短列div和高列div的高度设置为100％（在此示例中，80％+ 20％= 20％的100％）