CSS в сеточной системе Fluid 960

Сетка 960 великолепна, и после ее загрузки я заметил, что demo.html содержит в конце примеры классов .push и .pull, подобные этому один:

<div class="grid_6 push_6">
  <div class="grid_1 alpha">
    <p>
      60, class = "grid_6 push_6" => class = "grid_1 alpha"
    </p>
  </div>
  <!-- end .grid_1.alpha -->
  <div class="grid_5 omega">
    <p>
      380, class="grid_6 push_6" => class="grid_5 omega"
    </p>
  </div>
  <!-- end .grid_5.omega -->
  <div class="clear"></div>
  <div class="grid_3 alpha">
    <p>
      220, class="grid_6 push_6" => class="grid_3 alpha"
    </p>
  </div>
  <!-- end .grid_3.alpha -->
  <div class="grid_3 omega">
    <p>
      220, class="grid_6 push_6" => class="grid_3 omega"
    </p>
  </div>
  <!-- end .grid_3.omega -->
</div>
<!-- end .grid_6.push_6 -->

На главной странице есть ссылка на систему гибкой сетки под заголовком "Генератор пользовательских CSS", который странным образом пропускает приведенный выше тест (нажмите «предварительный просмотр», чтобы увидеть тест). Решил добавить такой тест, как в css флюидной сетки ЕСТЬ эти классы!

1) Я сразу заметил, что есть проблема, когда вы пытаетесь, например, установить цвет фона в самом внешнем, содержащем DIV: он не заполняет все содержимое, чтобы включить мои тестовые (содержащиеся) случаи внизу! Что было более странным, так это то, что когда я использовал .clearfix из файла css, который я взял с оригинального сайта (960.gs), проблема была исправлена! то есть этот:

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after {
     content: ' ';
     display: block;
     overflow: hidden;
     visibility: hidden;
     font-size: 0;
     line-height: 0;
     width: 0;
     height: 0;
}

.clearfix:after,
.container_12:after {
     clear: both;
}

2) Самая большая проблема остается с моими DIV тестовыми примерами с классами "grid_6 pull_6" или "grid_6 push_6", которые содержат DIV, которые сжимаются и не расширяются по всей ширине!

Кто-нибудь знает решение для шаблона гибкой сетки 960, в котором удается представить классы .pull и .push рядом друг с другом?

См. мою точку зрения на jsbin.com: попробуйте изменить размер браузера (размеры пикселей не сохраняются, используйте картинка как фон для дальнейшего изучения)

Спасибо!


html css responsive-design fluid-layout 960.gs
person centurian    schedule 12.09.2013    source источник
comment
Есть ли какие-либо поля в сетке? Они могут вас запутать.   -  person Dillmo    schedule 13.09.2013
comment
О, да, есть: у каждого grid_i есть поле слева/справа: 1%; у альфы/омеги есть поле слева/справа: 0;   -  person centurian    schedule 13.09.2013
comment
Я за решение с абсолютной позицией + медиа-запросы + движок, который создает такой макет, но сначала я должен убедиться в бессилии всех других методов.   -  person centurian    schedule 14.09.2013

Ответы (1)


arrow_upward
0
arrow_downward

Это решает проблему: «проценты в блочных элементах основаны на ширине их родителей». Таким образом, даже если наши классы «альфа» и «омега» также являются классами «сетка_5» или «сетка_3», они берут 5 или 3 столбца из 12 своих контейнеров, которые являются «сеткой_6», а НЕ их прародителем, т.е. контейнер_12"; это большое отличие от статического шаблона, где измерения проводятся в пикселях и не имеют ничего общего с родителями или бабушками и дедушками.

Приведенные выше расчеты следует рассматривать пропорционально: «grid_6» с полями 1% слева и справа на сетку в только что случившемся контейнере 960 пикселей = общая ширина 6 * 60 + 5 * 20 = 460 пикселей или 47,916% * 960/100. (где ширина в блочной модели CSS2 определяется как граница+заполнение+контекст, а не сломанный один из ‹=IE7 в специальном режиме).

Взяв приведенный выше результат 460 пикселей для дочернего элемента «grid_3», мы должны измерить 22,916% * 460/100 = 105,41 пикселей, и инструменты разработчика Chrome дают нам почти это число, если мы изменим размер окна, чтобы достичь 960 пикселей «контейнер_12»!

Эмпирическое правило: "сумма сеток в подконтейнере должна быть равна 12".

Итак, приведенный выше пример должен стать:

<div class="grid_6 push_6">
   <div class="grid_2 alpha">
      <p>60, class = "grid_6 push_6" => class = "grid_2 alpha"</p>
   </div>
   <!-- end .grid_2.alpha -->
   <div class="grid_10 omega">
      <p>380, class="grid_6 push_6" => class="grid_10 omega"</p>
   </div>
   <!-- end .grid_10.omega -->
   <div class="clear">&nbsp;</div>
   <div class="grid_6 alpha">
      <p>220, class="grid_6 push_6" => class="grid_6 alpha"</p>
   </div>
   <!-- end .grid_6.alpha -->
   <div class="grid_6 omega">
      <p>220, class="grid_6 push_6" => class="grid_6 omega"</p>
   </div>
   <!-- end .grid_6.omega -->
</div>

См. на jsbin.com.

person centurian    schedule 16.09.2013