CSS Fluid Layout с 3 столбцами - PullRequest
Новая
       15

CSS Fluid Layout с 3 столбцами

0 голосов
/ 20 февраля 2010

Столбец B в расположении ниже выглядит неправильно. Мне удалось сделать макет из 3 столбцов, используя http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/. Однако это предполагает, что фиксированные столбцы A и B имеют одинаковую высоту / имеют одинаковую вертикальную начальную точку. В моем случае B имеет еще один div жидкости выше.

альтернативный текст http://img191.imageshack.us/img191/1520/fluidlayout.png

Я не знаю, как сделать столбец B. Кто-нибудь может помочь?

Спасибо!

Обновление:

Я пытаюсь использовать display: table и display: table-cell, но не работает на IE8. Работает на Firefox. 

<html>
    <head>
    </head>
    <body>
        <div style="display: table">
            <div style="display: table-cell">
                Column 1
            </div>
            <div style="display: table-cell">
                Column 2
            </div>
        </div>
    </body>
</html>

Даже позже отредактируйте:

Для того, чтобы код выше работал на IE8, вам нужно добавить: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ответы [ 2 ]

2 голосов
/ 20 февраля 2010

Есть 4 способа сделать это:

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

  2. «Один истинный макет» . Это довольно уродливый хак, который работает, указывая огромный нижний отступ, а также отрицательное нижнее поле и скрывая переполнение. На практике он работает довольно хорошо, но имеет множество мелких проблем, таких как отсутствие способа применения нижних границ (полный список см. По ссылке).

  3. Используйте обертку с display: table и присвойте столбцам display: table-cell. Я читал, что это работает в большинстве браузеров, но сам не пробовал, поэтому никаких гарантий.

  4. Вернуться к таблицам. CSS семантически великолепен и все такое, но иногда у вас нет выбора, кроме как пожертвовать семантикой машины для достойного взаимодействия с пользователем.

1 голос
/ 20 февраля 2010

Логическим процессом для этого было бы удалить B из его текущей позиции в шаблоне DD.

Имейте центральный div, чтобы занять дополнительное пространство.

Внутри этого есть ваш дополнительный жидкий div, который вы желаете.

Тогда под этим есть еще один div, и внутри него ваш жидкий div и B.

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

Нет похожих вопросов

...