Skeleton Boilerplate: столбцы накладываются друг на друга, но я хочу, чтобы они были рядом?

Я использую 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>

skeleton-css-boilerplate skeleton-code
person user32734    schedule 15.11.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Во-первых, у вас есть один закрывающий тег div. многие. Помимо этого, теперь вы помещаете все теги «xxx-columns» в отдельную строку, вам нужно поместить их все в один div «row».

Как это:

<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>
person McVenco    schedule 17.11.2015