Фиксированный-гибкий-фиксированный макет для 960.gs

Наш движок веб-сайта использует систему сетки 960.gs, и я пытаюсь изменить ее на 3 столбца с фиксированным (100 пикселей) - плавным (от максимальной ширины) - фиксированным (100 пикселей) видом. К сожалению, все онлайн-генераторы 960.gs делают либо полностью фиксированные, либо полностью гибкие сетки. Итак, я пытаюсь изменить исходно сгенерированную полножидкую сетку на это представление:

<------------100%--------------->

======== =============== ========
| fixed| |max to screen| |fixed |
======== =============== ========

<-100px>                 <-100px>

Код (после модификации): http://jsfiddle.net/vZm8x/

  • Проблема 1) Я не знаю, как сделать так, чтобы центральная область контента была максимально слева на экране. Потому что ширина:авто; вообще не работает, ширина: 100% просто упаковка div.
  • Проблема 2) после того, как все элементы div были установлены на 100 пикселей, он продолжает сворачивать все что угодно. (отображение: встроенный; не помогает какие-либо идеи?)

Мой вопрос: возможно ли изменить шаблон 960.gs в соответствии с нашими потребностями? Если да, пожалуйста, дайте мне совет, чтобы исправить проблемы? Заранее спасибо!


layout css grid fluid-layout 960.gs
person Ken Tang    schedule 04.03.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

Вам понадобится что-то вроде:

<div class="left"></div>
<div class="right"></div>
<div class="middle">Content</div>

и:

div {
    /* border-box, to make sure "width" is our intended width */
    -moz-box-sizing: border-box; /* Firefox still uses prefix */
    box-sizing: border-box;
}

.left {
    float: left;
    width: 100px;
    background: #f00;
}

.right {
    float: right;
    width: 100px;
    background: #00f;
}

.middle {
    width: 100%;
    padding: 0 100px;
    background: #ccc;
}

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

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

В качестве альтернативы вы можете использовать position: absolute; в боковых столбцах примерно так:

.wrapper {
  position: relative; /* Constrains the columns within their parent. Not needed if parent is <body> */
}

.left {
  position: absolute;
  top: 0;
  left: 0;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
}

.middle {
  padding: 0 100px;
}

div {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Эти трюки будут работать в IE8+, Firefox, Chrome, Safari и Opera. У IE7 могут быть проблемы из-за использования блочной модели W3C ("content-box") и нераспознавания box-sizing CSS, но есть несколько приемов, чтобы заставить его работать, если вам это нужно. С IE6 все должно быть в порядке, потому что он по умолчанию использует блочную модель на основе "границы". (Возможно, вам придется поиграть с z-index, чтобы настроить IE. Если это так, установите .middle{ position: relative; z-index: 1} и добавьте z-index: 2 в левый и правый столбцы.)

Трюк position: absolute имеет преимущество перед плавающим в том, что ваши боковые панели могут появляться до или после блока контента, что делает его потенциально более семантическим вариантом.

Причина, по которой они работают, заключается в том, что а) ваши боковые столбцы фиксированы, поэтому мы просто устанавливаем отступы на ширину этих столбцов, и б) position: absolute и float: [left/right] убирают элементы из потока документа, что означает, что документ обеспокоен, они не там и не занимают места. Это позволяет другим элементам перемещаться туда, где раньше были эти элементы, накладывая их друг на друга.

person Shauna    schedule 04.03.2013