CSS: по центру, плавное левое, фиксированное правое, упорядоченный исходный макет с минимальной / максимальной шириной

Заголовки говорят об этом. Мне нужен макет CSS с двумя столбцами, который:

  • по центру — основное содержимое располагается по центру страницы
  • имеет фиксированную (в пикселях) ширину правого столбца
  • имеет гибкий левый столбец - использует все доступное пространство за вычетом ширины правого столбца
  • упорядочен по исходному коду — содержимое левого столбца предшествует содержимому правого столбца в исходном коде HTML
  • допускает минимальную ширину - 760 пикселей в моем примере
  • допускает максимальную ширину - 1024px в моем примере

Если окно больше максимальной ширины, содержимое будет центрировано на странице по максимальному значению. Если окно меньше максимальной ширины, содержимое заполняет 100% страницы, если только оно не меньше минимальной ширины, из-за которой появляется горизонтальная полоса прокрутки.

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

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

Меня не волнует, использует ли он числа с плавающей запятой или отрицательные поля, но я бы хотел избежать абсолютного позиционирования.

+---------------------------------------+
|                                       |
|  +---------------------------+-----+  |
|  |fluid                      |fixed|  |
|  |                           |     |  |
|  |                           |     |  |
|  +---------------------------+-----+  |
|                                       |
+---------------------------------------+

css liquid-layout fluid-layout elasticlayout
person Rick    schedule 16.07.2010    source источник
comment
Что мы.... кодовые фермеры? Почему бы вам не потратить пару минут на поиск в Google, попробовать несколько примеров и вернуться, чтобы задать вопросы о том, что вы не можете заставить работать, в отличие от «Пожалуйста, сделайте это для меня».   -  person John    schedule 16.07.2010
comment
@Джон, тебе не нужно быть грубым по этому поводу.   -  person derekerdmann    schedule 16.07.2010
comment
Не пытаясь быть грубым об этом. Но если цель состоит в том, чтобы учиться, то делать это для кого-то, чтобы они могли копировать и вставлять, не поможет им.   -  person John    schedule 16.07.2010
comment
@John Как указано в вопросе, я просмотрел множество примеров макетов, и ни один из них не соответствует этим требованиям. Я много сделал, чтобы попытаться заставить это работать без везения. Гугл не помог. Пожалуйста, прочитайте вопрос полностью...   -  person Rick    schedule 16.07.2010
comment
Суть вопроса не в том, чтобы SO что-то для него сделал, а в том, чтобы посмотреть, знает ли SO, как что-то делается.   -  person Ryan Kinal    schedule 26.01.2011

Ответы (3)


arrow_upward
3
arrow_downward

Я настоятельно рекомендую ознакомиться с шаблонами CSS на сайте Dynamic Drive. Пятый вниз должен быть тем, что вы ищете (Fluid-Fixed). Просто добавьте max-width и min-width к основному элементу контейнера, и все будет готово.

К вашему сведению, это действительно хорошие шаблоны для использования в качестве основы для макетов страниц. Игра с CSS — отличный способ узнать много нового о плавающих элементах и ​​позиционировании, и это действительно помогло мне в первые дни веб-разработки.

person derekerdmann    schedule 16.07.2010

arrow_upward
1
arrow_downward

Моя попытка: http://www.ryankinal.com/fluid/

Это не работает полностью, хотя это только потому, что при очень маленьком размере окна мои отрицательные поля могут привести к тому, что контент упадет со страницы. Вот теория:

  1. контейнер на некоторый процент
  2. левый столбец на 100% контейнера и плавает влево
  3. правый столбец, обернутый шириной 0%, обертка с плавающей запятой
  4. правый столбец фиксированной ширины (200 пикселей в моем примере)
  5. левый столбец и правый столбец левые поля равны половине ширины правого столбца (в моем примере 100 пикселей)

Итак, чем больше правая колонка, тем больше вероятность, что контент отвалится. Но это так близко, как я получил в хороший час или около того. Это также немного хакерски из-за того, что правый столбец заключен в посторонний div и используется преимущество overflow: visible.

Но это мои герцоги (пока).

person Ryan Kinal    schedule 16.07.2010
comment
Это не совсем работает, как ожидалось, но HTML намного чище, чем некоторые другие примеры ответов. Я собираюсь изучить это, но не могу отметить это как лучший ответ. Спасибо за новую отправную точку для дальнейшего изучения. (+1) - person Rick; 17.07.2010
comment
Это определенно было задумано как отправная точка, а не как лучший ответ. Я, вероятно, буду развивать его дальше, а также. - person Ryan Kinal; 17.07.2010

arrow_upward
0
arrow_downward

Вы ищете что-то подобное? (отрицательные поля + поплавки + правильный исходный порядок + фиксированное право)

http://blog.html.it/layoutgala/LayoutGala23.html

Дополнительные макеты на главной странице: http://blog.html.it/layoutgala/

А затем просто добавьте минимальную/максимальную ширину в контейнер.

person meder omuraliev    schedule 16.07.2010