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-columns' 标签放在单独的行中，您需要将它们全部放在一个 "row" 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>

Skeleton Boilerplate：列彼此堆叠，但我希望它们并排放置？

Skeleton Boilerplate: Columns are stacking on top of each other but I want them side by side?

skeleton-code

skeleton-css-boilerplate