Выравнивание высоты столбцов без использования TABLE - PullRequest
Новая
       26

Выравнивание высоты столбцов без использования TABLE

2 голосов
/ 03 декабря 2008

Есть ли способ иметь два столбца, которые соответствуют друг другу по высоте, без использования ячеек таблицы, фиксированной высоты или JavaScript?

Использование ТАБЛИЦЫ 

<table>
    <tr>
        <td style="background:#F00;">
            This is a column
        </td>
        <td style="background:#FF0;">
            This is a column<br />
            That isn't the same<br />
            height at the other<br />
            yet the background<br />
            still works
        </td>
    </tr>
</table>

Использование DIVs 

<div style="float:left;background:#F00" >
    This is a column
</div>
<div style="float:left;background:#FF0" >
    This is a column<br />
    That isn't the same<br />
    height at the other<br />
    yet the background<br />
    still works
</div>
<div style="clear:both;" ></div>

Цель состоит в том, чтобы оба фона расширялись на всю высоту независимо от того, какая сторона выше.

Вложение одного в другое не сработает, поскольку не гарантирует, что обе стороны имеют правильную высоту.

К сожалению, предварительный просмотр показал работающий HTML, но фактическое сообщение удалило его. Вы должны быть в состоянии вставить это в файл HTML и понять, что я имею в виду.

Ответы [ 7 ]

3 голосов
/ 03 декабря 2008

http://www.xs4all.nl/~peterned/examples/csslayout1.html

это то, что вы хотите, задайте им высоту 100% (используя этот трюк CSS), и они растянутся до высоты содержащего элемента div!

edit: забыл упомянуть, поместите их в контейнер div!

Редактировать: 

<html>
<head>
    <style>
        html, body
        {
            margin: 0;
            padding: 0;
            height: 100%; /* needed for container min-height */
        }
        #container
        {
            background-color: #333333;
            width: 500px;
            height: auto !important; /* real browsers */
            height: 100%; /* IE6: treaded as min-height*/
            min-height: 100%; /* real browsers */
        }
        #colOne, #colTwo
        {
            width: 250px;
            float: left;
            height: auto !important; /* real browsers */
            height: 100%; /* IE6: treaded as min-height*/
            min-height: 100%; /* real browsers */
        }
        #colOne
        {
            background-color: #cccccc;
        }
        #colTwo
        {
            background-color: #f4f5f3;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="colOne">
            this is something</div>
        <div id="colTwo">
            this is also something</div>
        <div style="clear: both;">
        </div>
    </div>
</body>
</html>
2 голосов
/ 26 июня 2009

Используйте Искусственную колонку Техника CSS для решения этой проблемы.

Учитывая следующее: 

<div class="contentSidebarPair">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

Вы можете использовать следующие стили: 

/* sidebar.gif is simply a 200x1px image with the bgcolor of your sidebar.
   #FFF is the bgcolor of your content */
div.contentSidebarPair {
    background: #FFF url('sidebar.gif') repeat-y top left;
    width: 800px;
    margin: 0 auto; /* center */
    zoom: 1; /* For IE */
}

/* IE6 will not parse this but it doesn't need to */
div.contentSidebarPair:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

div.sidebar {
    float: left;
    width: 200px;
}

div.content {
    float: left;
    width: 600px;
}

Там! Просто и эффективно. Абсолютно нулевой JavaScript. И если вы хотите создать более сложные макеты (жидкостные макеты), вы можете адаптировать эту технику, используя background-position. учебник доступен здесь .

2 голосов
/ 03 декабря 2008

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

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

0 голосов
/ 11 июля 2011

Это просто, если вы имеете дело с браузерами, которые поддерживают CSS2.1 (IE8 и выше, все другие основные браузеры). Если это ваша разметка: 

<div>
    This is a column
</div>
<div>
    This is a column<br />
    That isn't the same<br />
    height at the other<br />
    yet the background<br />
    still works
</div>

Это будет ваш CSS: 

div { display: table-cell; }

Если вам нужно более одной строки в макете, вам нужно добавить туда некоторые элементы-обертки, но в противном случае это работает сразу .

0 голосов
/ 07 августа 2009

Да, это возможно - чистый CSS и без хаков - столбцы равной высоты .

Проверьте эту статью - она ​​очень хорошо написана.

0 голосов
/ 03 декабря 2008 
display:inline-block

С хитростью, это даже работает в IE: 

<div><span>
    col1
</span></div>
<div><span>
    col2
</span></div>

div {display:inline;}
span {display:inline-block;}
0 голосов
/ 03 декабря 2008

Есть простой способ достичь этого с умным HTML и CSS.

Сначала HTML: 

<div id="container">
    <div id="col1">
        this is column 1
    </div>
    <div id="col2">
        this is column 2<br />
        it is obviously longer than the first column <br />
        YEP!
    </div>
</div>

Обратите внимание на отсутствие ясности: оба несемантических дел.

Теперь CSS: 

#container { background:#f0f; overflow:hidden; width:400px; }
#col1, #col2 { float:left; width:50%; }
#col2 { background:#ff0; }

Переполнение, скрытое в правиле контейнера, гарантирует, что контейнер расширится до размера содержащихся в нем плавающих элементов div (и избавится от несематического очистного элемента div, который все так любят).

Фон контейнера относится к первому столбцу. Фон div col2 применяется только ко второму div. Это то, что дает нам иллюзию, что оба div всегда имеют одинаковую высоту.

Простое семантическое решение в 3 строки CSS. Наслаждайтесь

РЕДАКТИРОВАТЬ: Пожалуйста, прокомментируйте причину для голосования, в противном случае я должен догадаться, почему мой ответ неправильный. В этом случае я забыл добавить свойство ширины в контейнер, чтобы оно хорошо сочеталось с IE6 / 7. Пожалуйста, проверьте исправленный CSS выше.

...