Как создать 3-х колонную жидкость с фиксированной жидкостью?

Я ищу 3-х столбчатую раскладку css, с 1 фиксированной секцией посередине и 2-мя флюидами:

http://sofru.miximages.com/html/di-UEFI.png

средний имеет ширину 250 пикселей (например), а боковые панели имеют (как минимум) ширину 150 пикселей. если ширина браузера была больше 550 пикселей (250 + 300), боковые панели должны иметь большую ширину. (и средний всегда 250px)

Что может сделать CSS? с совместимостью во всех браузерах.

примечание : я видел эту страницу , но я не знаю, как ее изменить для моего желания

Вы можете попробовать использовать inline-block s для него. Они используются довольно редко, но иногда они довольно хороши для макетов.

Итак, посмотрите на это: http://jsfiddle.net/kizu/UUzE9/ – с помощью inline-block вы можете создавать макеты с любым количеством фиксированных и текучих столбцов. Алгоритм:

  1. Сначала вы добавляете дополнение к сумме всех фиксированных столбцов в оболочку. В вашем случае – 250px .
  2. Затем вы добавляете min-width в обертку, равную сумме минимальной ширины столбцов текучей среды.
  3. Затем вы добавляете white-space: nowrap в оболочку, поэтому столбцы не будут прыгать.
  4. А затем просто добавьте все столбцы, которые вам нужны.

Если вам нужна поддержка IE7 и меньше, есть еще кое-что, кроме обычного исправления inline-block :

  1. Вы должны вернуть white-space: normal для внутреннего дочернего элемента столбца, или столбцы не останутся на одной строке.
  2. В IE может появиться фантомная прокрутка, возможно, есть лучший способ ее удалить, но я просто использую overflow: hidden на некоторой оболочке.

Наслаждаться 🙂

Чтобы сделать эту работу в IE6 / 7 без JavaScript, самый простой способ сделать это – это table .

Знаю, знаю. В этом случае все не так уж плохо.

См .: http://jsfiddle.net/thirtydot/Q2Qxz/

Протестировано в IE6 / 7 + Chrome, и оно будет работать только во всех других современных браузерах.

HTML:

 
fluid fixed

CSS:

 html, body { margin: 0; padding: 0; border: 0 } #container { border: 0; table-layout: fixed; width: 100% } #container td { vertical-align: top } #mid { width: 250px; background: #ccc } #left { background: #f0f } #right { background: #f0f } 

Если вы не используете один из готовых шаблонов,
Вы можете начать с трех div слева, средних с шириной: 250 пикселей и внешних с min-width: 150px шириной: 150 пикселей
Возможно, вы захотите заменить его тегом

, просто дайте ему display: block