как система сеток компенсирует изменение высоты колонн?

Ниже я использую извлечение из системы с 12 сетками 960 пикселей.

<style>
body {
  background: gray;
}

#container_12 {
   width: 960px;
   margin-left: auto;
   margin-right: auto;
   background: white;
   overflow: hidden;
}

.column_1, .column_2, .column_3, .column_4, .column_5, .column_6, .column_7, .column_8, .column_9, .column_10, .column_11, .column_12 {
  float : left;
  margin-left : 10px;
  margin-right : 10px;
  margin-bottom: 10px;
} 

.column_1 {
  width : 60px;
}

.column_2 {
  width : 140px;
}

.column_3 {
  width : 220px;
}

.column_4 {
  width : 300px;
}

.column_5 {
  width : 380px;
}

.column_6 {
  width : 460px;
}

.column_7 {
  width : 540px;
}

.column_8 {
  width : 620px;
}

.column_9 {
  width : 700px;
}

.column_10 {
  width : 780px;
}

.column_11 {
  width : 860px;
}

.column_12 {
  width : 940px;
} 

</style>

<body>
  <div id="container_12">

    <!-- First row -->
      <div class="column_1" style="height: 400px; background: red;">
      </div>
      <div class="column_11" style="height: 200px; background: red;">
      </div>

    <!-- Second row -->
    <!--
    This column overlaps into second row
    <div class="column_1">
    </div>
     -->

      <div class="column_5" style="height: 200px; background: green;">
      </div>
      <div class="column_3" style="height: 200px; background: green;">
      </div>
      <div class="column_3" style="height: 200px; background: green;">
      </div>

  </div>
</body>

Выход:

http://jsfiddle.net/hnDtY/

Теперь предположим, если я скопирую две приведенные выше строки, чтобы получить в общей сложности 4 строки. Но я хочу дать первым двум строкам фиолетовый фон, а последним двум строкам белый фон:

http://jsfiddle.net/QZuED/

Проблема с тем, что я сделал выше, заключается в том, что мне пришлось создать новый div с именем «row» и обернуть его вокруг двух столбцов. Это делает его несовместимым с остальной частью макета, в которой нет «строки» div, охватывающей каждую строку. Если бы я добавил «строку» div в каждую строку и дал ей свойство overflow: hidden, тогда было бы невозможно разделить один столбец на две строки, потому что это подтолкнуло бы элементы во второй строке вниз. Так как же сетевые системы справляются с этой ситуацией?


css grid-system
person JohnMerlino    schedule 30.04.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В самом деле, вложение блоков внутри div приведет к тому, что они не смогут распространяться на остальную часть содержимого. Чаще всего я использую повторяющееся фоновое изображение.

body {
    background: gray url(web.png) repeat-x;
}

Это также позволит вам использовать градиент, переходящий в остальную часть фона. Вот ваш jsfiddle, измененный, чтобы отразить это.

person OscillatingEthmoid    schedule 30.04.2013
comment
Тогда как этой системе уйти с того, чтобы разделители строк окружали каждый набор столбцов: responsivegridsystem.com - person JohnMerlino; 30.04.2013
comment
Потому что он не пытается расширить какие-либо div из одной строки div в другую. Похоже, что он работает так же, как и второй приведенный вами пример. Может, я вас неправильно понимаю? - person OscillatingEthmoid; 30.04.2013
comment
поэтому добавление повторяющегося фонового изображения или вложение нескольких столбцов в строку div со свойством переполнения: скрытые серьезно являются единственными возможными решениями (без обращения к таблицам)? - person JohnMerlino; 01.05.2013