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

Ниже я использую извлечение из системы с 12 сетками 960px.Как сетка компенсирует изменение высоты столбцов?

<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» в каждой строке и дал ей переполнение: скрытое свойство, тогда невозможно будет иметь один столбец в две строки, потому что он будет толкать элементы во второй строке вниз. Итак, как системные системы справляются с этой ситуацией?

источник

2013-04-30 JohnMerlino

Действительно, вложение блоков внутри div приведет к тому, что они не смогут распространиться на остальную часть содержимого. Ответ, который я нахожу наиболее часто используемым, - это повторяющееся фоновое изображение.

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

Это также позволит использовать градиент, который исчезает в остальной части фона. Вот ваш jsfiddle tweaked to reflect this.

источник

2013-04-30 06:50:30 OscillatingEthmoid

Тогда как эта система уходит с наличием разделителей строк вокруг каждого набора столбцов: http://www.responsivegridsystem.com/ – JohnMerlino

Потому что он не пытается расширять любые div из одного div строки в другой. Он, похоже, функционирует так же, как второй приведенный вами пример. Может быть, я вас не понимаю? – OscillatingEthmoid

, так что добавление повторяющегося фонового изображения или вложение нескольких столбцов в строке div с свойством переполнения: скрытые являются серьезными единственными возможными решениями (не прибегая к таблицам)? – JohnMerlino

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

ответ

Смежные вопросы