960 CSS рамки, альфа / омега выпуск - PullRequest
Новая
       13

960 CSS рамки, альфа / омега выпуск

1 голос
/ 06 августа 2011

Я использую рамку 960 CSS.Проблема в том, что я пытаюсь использовать всю ширину 960 в макете с 3 столбцами.Поэтому я использую контейнер 16 и использую 3 деления с сетками.Первая и последняя сетка Я использую альфа и омегу, чтобы удалить левый и правый желоб.Он удаляет альфа-желоб, но не омега-желоб.Вот HTML: 

<div class="container_16" id="section_body">
    <div class="grid_3 alpha" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3 omega" style="background:blue;">body right</div>
</div>

CSS для тела раздела: 

#section_body {
    min-height:500px;
    overflow:hidden;
    background:#fff;
}

Вот скриншот проблемы, вы можете увидеть, что последний div в синем не проходит всепуть вправо.Что я делаю не так?

enter image description here

ОБНОВЛЕНИЕ

Я попытался удалить все стили, за исключением 960 CSS и 3 Div и явсе еще есть та же проблема.Неважно, что я не могу заставить его идти на всю ширину 960 пикселей.Это будет только 940px ширины.

Ответы [ 2 ]

5 голосов
/ 12 декабря 2011

ПРЕДУПРЕЖДЕНИЕ: В коде Jauzsika есть опечатка ("grid16" вместо "grid_16"), которая заставляет его работать, даже если он не должен (из-за "container_16 "и пропущенная" альфа ").

ПРАВИЛЬНЫЙ ОТВЕТ:

Необходимо помнить две важные вещи:

1)дизайн, 960gs имеет левое и правое поле размером 10 пикселей, то есть фактическая область содержимого имеет ширину всего 940 пикселей.

2) При использовании вложенных сеток, и только в этом случае дочерние элементы требуют специальных классов.Первому ребенку нужен класс «альфа», а последнему - класс «омега».

Поскольку в вашем коде нет дочерних элементов div, вам не нужны «альфа» и «омега».

Итак, оба решения эквивалентны (исправленный код): 

<div class="container_16" id="section_body" style="background-color:#CCCCCC">
    <div class="grid_3" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3" style="background:blue;">body right</div>
</div>

<div class="container_16" id="section_body" style="background-color:#CCCCCC">
<div class="grid_16">
    <div class="grid_3 alpha" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3 omega" style="background:blue;">body right</div>
</div>
</div>
0 голосов
/ 06 августа 2011

Поскольку ширина левого и правого столбцов составляет 160 пикселей, они имеют левое и правое поле 10-10 пикселей, то есть дополнительно 20 пикселей.Центральная колонка имеет ширину 580 пикселей, а также поля по 10-10 пикселей.

Итак, 160 + 10 + 160 + 10 + 580 + 20 = 940px

Выбранная вами 3-колоночная компоновка на 20px толще.

В следующем примере 10-10px с каждой стороны, так что это мертвая точка. 

<div class="container_16" id="section_body" style="background-color:#CCCCCC">
<div class="grid16">
    <div class="grid_3" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3 omega" style="background:blue;">body right</div>
</div>
</div>
...