Как настроить вложенную сетку с помощью Skeleton

Я хочу добавить сетку изображений и контента в область основного контента страницы моего веб-сайта. У меня есть базовый шаблон с двумя столбцами, и я хочу разместить сетку в большой области содержимого. Все работает нормально, но как только я изменяю размер на портрет, я теряю все поля между div. Я не слишком уверен, как правильно сгруппировать эти элементы в скелете. Нужно ли заканчивать контейнер для каждой строки? Любая помощь или предложения приветствуются.

<div class="container">
    <div class="four columns"></div>
    <div class="twelve columns">

        <!-- grid goes here -->
        <div class="container">
        <div class="six columns alpha"></div>
        <div class="six columns omega"></div>
        <div class="six columns alpha"></div>
        <div class="six columns omega"></div>
        </div>


    </div><!-- end twelve columns>
</div><!-- end container -->

skeleton-css-boilerplate
person xuamox    schedule 31.05.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я вижу, что никто не ответил на это раньше. Я предполагаю, что вы уже решили это, так что этот ответ для всех, кто пытается найти

Проблема в том, что класс container имеет фиксированную ширину 960 пикселей, поэтому вы не можете их вкладывать друг в друга. Вторая проблема заключается в том, что количество столбцов внутри (которые вы пытаетесь вложить) превышает количество столбцов. См. класс "clearfix". Навскидку, это было самое чистое решение, которое я нашел:

<div class="container">
    <div class="four columns">four columns</div>
    <div class="twelve columns">
        <div class="sixteen columns clearfix">                                                                                                                   
            <div class="three columns alpha"> first</div>
            <div class="three columns">second</div>
            <div class="three columns">third</div>
            <div class="three columns omega">fourth</div>
        </div><!-- end clearfix -->
    </div><!-- end twelve columns>
</div><!-- end container -->
person Ovid    schedule 29.01.2014

arrow_upward
0
arrow_downward

Часть, которую я пропустил, когда впервые увидел этот ответ, заключалась в том, что столбцы между Альфой и Омегой просто помечены как три столбца. Таким образом, для первого столбца используйте альфа, а для последнего столбца используйте омега. Первоначальный вопрос не работает, потому что у них есть две альфы и омеги. Если вы посмотрите на альфа и омегу css, просто дайте им поля 0px слева (альфа) или справа (омега).

person Jared Eddy    schedule 26.08.2014