Есть ли простой 3-колоночный чистый CSS макет? - PullRequest
5 голосов
/ 15 мая 2009

Тот, который не требует следующего:

  1. опора на изображения (например, "искусственные столбцы")
  2. Какая-то странность или "хак", вставленные специально для IE
  3. Требуется, чтобы IE работал в режиме причуд
  4. Не имеет странности, как один из трех DIV, перекрывающих другие (т. Е. "Святой Грааль")
  5. Поля, установленные на большие отрицательные числа, располагают их далеко от экрана (опять же, «святой Грааль»)

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

Я должен упомянуть, что я ищу макет равной высоты.

Любой

РЕДАКТИРОВАТЬ: Я ищу ширину 100%, с центральной колонкой, являющейся жидкостью.

РЕДАКТИРОВАТЬ: Я также надеюсь указать ширину левого и правого столбцов в пикселях.

РЕДАКТИРОВАТЬ: Фон может быть прозрачным, но я бы хотел разделить линию между столбцами, которая проходит вверх и вниз.

Ответы [ 7 ]

16 голосов
/ 15 мая 2009

Нет такой вещи, как "простой", когда вы говорите о CSS.

Но есть простое решение, которое является кросс-браузерным, изящно деградирует и полностью совместимо с HTML и CSS: используйте таблицу с тремя столбцами.

Причина: DIV не имеют одинаковую динамическую высоту. Поэтому CSS не поддерживает это. Если вам нужен элемент блока, который гарантирует, что его дочерние элементы имеют одинаковую высоту, то для этого нужны таблицы.

[EDIT] Извините, что оскорбляю всех вас, фанатов CSS, но, честно говоря, когда что-то не предназначено для чего-то, и вы злоупотребляете этим, и это не работает, пожалуйста, перестаньте жаловаться, хорошо? DIV не ТАБЛИЦА и не может использоваться как один, не полагаясь на хаки.

[EDIT2] Как уже было сказано в различных местах , причина, по которой таблицы не использовались для разметки, заключалась в том, что в древние времена таблицы были only элементом дизайна, и это привело в HTML, который имел десятки вложенных таблиц. Это плохо. Но это не значит, что вы не должны использовать одну таблицу, чтобы расставить все по местам, а затем положиться на CSS, чтобы все внутри выглядело правильно.

Мозг похож на парашют: его приятно иметь, но полезно только когда он открыт.

6 голосов
/ 15 мая 2009

Возможно, вы сможете адаптировать:

http://matthewjamestaylor.com/blog/perfect-3-column.htm

1 голос
/ 15 мая 2009

Вы можете достичь этого, используя jS.

Если вам нужно было создать 3 деления, то один поплавок влево, один поплавок вправо и в середине как поле слева и справа с шириной по центру.

Тогда с небольшим количеством JS у каждого div, имеющего свой собственный ID, вы можете рассчитать их высоту, установив 2 нижних значения на самое высокое значение.

Довольно просто с Jquery.

1 голос
/ 15 мая 2009

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

0 голосов
/ 15 мая 2009

YAML

"Еще один многоколонный макет" (YAML) является (X) HTML / CSS каркасом для создавая современные и гибкие плавающие макеты. Структура чрезвычайно универсален в программировании и абсолютно доступный для конечных пользователей.

Он содержит некоторые исправления ошибок IE, но вы можете удалить их.

0 голосов
/ 15 мая 2009

http://960.gs/

Этот может использоваться для 3-колоночного макета (и для различных других макетов). Лично я не думаю, что это хорошая идея - использовать div для всего, но это просто и хорошо ... это работает.

edit: Для макета шириной 100% http://www.alistapart.com/articles/fluidgrids/ может помочь, но я не уверен, что этот тип макета по-прежнему квалифицируется как "простой".

0 голосов
/ 15 мая 2009

разделить страницу на три столбца одинаковой высоты?

<html>
<head>
<style type="text/css">
#col_wrapper{
    height: 400px;
}

.col{
    width: 33%;
    float:left;
    height: 100%;
}
</style>
</head>
<body>
<div id="col_wrapper">
    <div class="col">
        one
    </div>
    <div class="col">
        two
    </div>
    <div class="col">
        three
    </div>
</div>
</body>

Никаких причуд и довольно просто.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...