Bourbon Neat - 如何做自动列？答案

【问题标题】：Bourbon Neat - How to do automatic columns?Bourbon Neat - 如何做自动列？
【发布时间】：2014-01-27 21:48:39
【问题描述】：

我正在使用 Bourbon Neat 构建一个网站，我需要像这样安排列：

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

我试过了

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

但所有列的高度相同。而且我需要不同的高度。

提前谢谢你。

【问题讨论】：

您发布的屏幕截图中想要的流顺序是什么？标记中的红色、绿色或黄色之后是什么？
接下来是绿色。然后是黄色，然后是蓝色。

标签： bourbon neat

【解决方案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%） .

【讨论】：