skeleton-css-boilerplate - Skeleton Boilerplate：列相互堆叠，但我希望它们并排？

Question

我正在使用 Skeleton 构建一个小的单页网站。

我的设计分为左侧 5 列，中间 3 列，右侧 4 列。

所以我首先在左侧添加前 5 列，在中间添加 3 列，在右侧添加 4 列，并使用 CSS 给它们设置黑色背景以查看效果。

发生的情况是这些列不是一个并排堆叠，它们彼此堆叠并且宽度为 960 像素！

我认为成为 Skeleton 的全部原因是开箱即用地自动并排堆叠列？

我错过了什么吗？谢谢 ！

标记：

<div class="container">
<div class="row">
      <div class="five-columns intro" style="margin-top: 25%">

    </div>

  </div>  

<div class="row">
      <div class="three-columns intro" style="margin-top: 25%">

    </div>

  </div>  

</div>

<div class="row">
      <div class="four-columns intro" style="margin-top: 25%">
    </div>
  </div>  
</div>

Answer 1

首先，你有一个div结束标签太多。除此之外，您现在将所有“xxx 列”标签放在单独的行中，您需要将它们全部放在一个“行”div 中。

像这样：

<div class="container">
    <div class="row">
        <div class="five-columns intro" style="margin-top: 25%">
        </div>

        <div class="three-columns intro" style="margin-top: 25%">
        </div>

        <div class="four-columns intro" style="margin-top: 25%">
        </div>
    </div>
</div>