bourbon - 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 显示 inline-block 将按照您希望的方式将列堆叠在一起。为内容 div 设置一个特定的高度（在本例中为 20em），然后将短列 div 和高列 div 的高度设置为 100%（本例中为 80% + 20% = 20 em 的 100%） .