Question

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

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

所以我首先在左边添加前5列，在中间添加3列，在右边添加4，然后使用CSS为它们添加黑色背景以查看效果。

发生的情况是，列不是一个堆叠在一起，它们堆叠在彼此的顶部，宽度为960px！

我认为成为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＆＃39;标记在一个单独的行上，你需要将它们全部放在一个＆＃34;行＆＃34;格。

像这样：

<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>

骨架Boilerplate：柱子堆叠在一起，但我希望它们并排？

1 个答案: