CSS статическая ширина боковые столбцы, минимальная и максимальная ширина центра содержимого столбца - PullRequest
Новая
       9

CSS статическая ширина боковые столбцы, минимальная и максимальная ширина центра содержимого столбца

2 голосов
/ 01 апреля 2012

У меня есть следующая скрипка, чтобы люди могли видеть http://jsfiddle.net/defaye/DhaHP/4/ Результат на полном экране: http://jsfiddle.net/defaye/DhaHP/4/embedded/result/

Проблема, с которой я столкнулся, заключается в том, что при переходе на определенную ширину изменения размера окна левый столбец отходит от группы. Мне нужно, чтобы они оставались соприкасающимися, с центральной колонкой, имеющей минимальную ширину от 400 до максимальной ширины 800 пикселей, ширину сторон: 200 пикселей. Однако заголовок должен быть на 100%.

Кто-нибудь знает, как решить эту проблему? Это сводит меня с ума.

Ответы [ 2 ]

1 голос
/ 01 апреля 2012

Вот еще один пример, совместимый с IE6 +: http://jsfiddle.net/DhaHP/12/ Результат: http://jsfiddle.net/DhaHP/12/embedded/result

Резюме изменений:

  • Изменены #left и #right, чтобы быть выше #center (#right до #left);
  • min-width и max-width при #container до 800px и 1200px соответственно;
  • Не плавать на #center;
  • margin-left и margin-right на #center равны ширине каждого бокового столбца;
  • float-left в #left и float-right в #right;

Единственным замечанием по этому поводу для IE6 является min-width и max-width, которые не работают без небольшого взлома или использования IE7.js. На IE7 работает как надо.

1 голос
/ 01 апреля 2012

Вот рабочая скрипка: http://jsfiddle.net/PhilippeVay/DhaHP/8/ (редактировать: теперь работает с Chromium)

Изменения сделаны:

  • HTML: # слева перед столбцом #center
  • CSS: нет относительного позиционирования вообще
  • display: table; на родительском элементе и table-cell на 3 столбцах.Это будет визуально (и только визуально) таблица.Ну, макет таблицы, а не структура таблицы.
  • ширина 200 пикселей на #left и #right
  • table-layout: fixed; на родительском элементе для переключения алгоритма таблицы натот, который учитывает размеры в соответствии с указаниями автора, а не угадывает размеры содержимого ячеек
  • Ограниченная ширина для родителя min-width: 800px; (400 + 200 + 200) иgrand-parent max-width: 1200px; (800 + 200 + 200) (правка: максимальная высота на #container работает только на Fx, а не на Chrome).К моему удивлению, он работает как есть.

Совместимость: IE8 +
При необходимости вы можете играть со встроенным блоком с IE6 / 7 (ну, display: inline; zoom: 1; эквивалент IE6 / 7 встроенного-блок для устаревших браузеров)

...