Скелетная заготовка: колонны накладываются друг на друга, но я хочу, чтобы они были рядом?

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" в отдельную строку, вам нужно поместить их все в один "рядный" 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>