Как сделать левый и правый желоба разными цветами с помощью 960.gs?

Как сделать левый и правый желоба разными цветами с помощью 960.gs? Когда я пробую что-то простое, например:

<div style="background-color: green">
  <div class="container_16">
    <div class="grid_16">
      test
    </div>
  </div>
</div>
<div style="background-color: cyan">
  <div class="container_16">
    <div class="grid_16">
      test
    </div>
  </div>
</div>

Зеленый и голубой цвета игнорируются. Похоже, что класс «grid_16» по какой-то причине удаляет цвет? Моя цель состоит в том, чтобы иметь возможность отображать разные разделы страницы разными цветами по всей странице, даже за пределами 960 пикселей. Поэтому, если кто-то сделает свой браузер размером 1200 пикселей, левая и правая стороны будут иметь правильный цвет, а остальная часть системы сетки будет содержаться в пределах 960 пикселей посередине.

Я мог бы добавить цвет фона в «тело», чтобы сделать это только для одного цвета, но я хочу, чтобы на странице было несколько цветов. Как разноцветные горизонтальные полосы. Спасибо.


960.gs
person Andrew Arrow    schedule 04.04.2010    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ну, чтобы понять причину, вам нужно понять, как работает макет сетки.

Дело в том, что когда вы указываете сетке определенную ширину, она также делает ее плавающей. Это означает, что ваши внешние элементы div имеют высоту 0px. Итак, короче. Он не удаляет цвет фона, он просто не показывает его, потому что показывать нечего (ваша сетка плавает поверх него, поэтому фактический размер не имеет значения.

Чтобы решить эту проблему, просто добавьте в контейнер clearfix, и она должна быть решена. Однако вам также нужно подумать о том, что элементы div наследуют цвет фона по умолчанию.

  <div style="background-color: green">
    <div class="container_16 clearfix" style="background:white">
      <div class="grid_16">
        test
      </div>
    </div>
  </div>
  <div style="background-color: cyan">
    <div class="container_16 clearfix" style="background:white">
      <div class="grid_16">
        test
      </div>
    </div>
  </div>
person Jimmy Stenke    schedule 04.04.2010

arrow_upward
0
arrow_downward

Склеивание двух контейнеров сетки бок о бок — не очень умный способ создания горизонтальных полос. Если вы хотите, чтобы некоторые контейнеры выходили за границы сетки, отрегулируйте их поля соответствующим образом или полностью поместите их позади (и снаружи) сетки.

person Azeem.Butt    schedule 04.04.2010