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

Posted 2023-02-16

【中文标题】Skeleton Boilerplate：列相互堆叠，但我希望它们并排？

【英文标题】：Skeleton Boilerplate: Columns are stacking on top of each other but I want them side by side?

【发布时间】：2016-02-16 23:05:12

【问题描述】：

我正在使用 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>

【参考方案1】：

首先，div 结束标签太多了。除此之外，您现在将所有“xxx-columns”标签放在单独的行中，您需要将它们全部放在一个“行”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>