Справка по динамическому CSS-макету

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

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

Я сделал то, что, как я полагал, был идеальным макетом, но есть одна серьезная проблема, я не знаю, как ее решить.

Таким образом, у меня есть левый столбец (меню), расположенный слева с установленной шириной (для будущих кнопок css одинакового размера). Затем у меня есть основной контент div, плавающий и левый, с максимальной шириной, чтобы браузер перемещал его рядом с меню. Без установки ширины он будет перемещаться под меню div. И, наконец, у меня есть правый столбец div с шириной и плавающей влево. Когда у меня достаточно текста в div, это идеальный вариант.

Но когда текст не является достаточно широким, содержимое div становится меньше и в основном разрушает компоновку, потому что все сдвигается влево и оставляет много места для правой стороны контейнера.

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

Я попытался установить его на процентную ширину, но это выглядит странно.

Мой макет размещен here, on my school webserver, и это немного более старая версия с правом div, плавающим справа, но в остальном это, как я описал.

Пожалуйста, если есть способ css, скажите мне. Благодарю.

источник

2010-11-25 B.Gen.Jack.O.Neill

Вы хотите влево/вправо дивы быть фиксированной, но только центр всплывать? – 2010-11-25 19:44:16

Нет, я хочу, чтобы все они плавали, поэтому страница на самом деле адаптируется к изменению размера окна обзора и остается читаемой без горизонтального скручивания. На самом деле, с большим количеством текста, его действие ОК, но с меньшим количеством текста оно закручивается, потому что div становится маленьким. Я думаю, что javascript может быть моей единственной надеждой ... – 2010-11-26 10:08:07

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

источник

2010-11-25 18:24:42 andrewmu

Мне нужно, чтобы он плавал, потому что я хочу динамически перейти влево от окна браузера, если он будет изменен до меньшего размера, чем контейнер. И когда его не floted, центральный div плавают вокруг левого div, и я не хочу этого. Когда вы используете margin-left, он остается открытым при изменении размера браузера .... – 2010-11-25 19:01:59

Используйте проценты

#left_menu{ width:15%; } 
#content{ width:72.5%; } 
#right_menu{ width:12.5%; }

Update

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

пример на http://www.jsfiddle.net/gaby/mBuf9/

источник

2010-11-25 18:34:06

Справка по динамическому CSS-макету

ответ

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