• Техногрет
  • Выравнивание по нижней границе

    HTML и CSSXSLTJavaScriptИзображенияСофтEtc
    Владимир Токмаков

    6 октября 2007


    Для просмотра этого примера необходим IE.

    Задача.

    Выровнять содержимое колонок произвольной высоты по общей нижней границе без использования таблиц.

    Для большинства современных браузеров это не проблема. Желаемого результата можно добиться при помощи CSS-свойств display (значения table, table-row, table-cell) и vertical-align (со значением bottom). Но в Internet Explorer, даже с появлением седьмой версии, этих значений нет.

    Предлагаемое ниже решение работает в IE версии 5 и выше. И не зависит от режима рендеринга — quirks, transitional или strict.

    Как это выглядит в браузере

    0
    1
    2
    3
    4
    5
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    0
    1
    2
    3
    01 
    02 
    03 
    04 
    05 
    06 
    07 
    08 
    09 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
    23 
    24 
    25 
    26 
    27 
    28 
    29 
    30 
    31 
    32 
    33 
    34 
    35 
    36 
    37 
    38 
    39 
    40 
    41 
    42 
    43 
    44 
    45 
    46 
    47 
    48 
    49 
    50 
    51 
    52 
    53 
    54 
    55 
    56 
    57 
    58 
    59 
    60 
    61 
    62 
    63 
    64 
    65 
    66 
    <style type="text/css">
    .columns3
    {
    display: table;
    position: relative;
    //overflow-y: hidden;
    width: 100%;
    }
    .columns3 .r
    {
    display: table-row;
    position: relative;
    //top: 100%;
    width: 100%;
    }
    .columns3 .a
    , .columns3 .b
    , .columns3 .c
    {
    display: table-cell;
    //display: inline;
    position: relative;
    //float: left;
    width: 33%;
    //margin-right: -100%;
    vertical-align: bottom;
    }
    .columns3 .b
    {
    width: 34%;
    //margin-left: 33%;
    }
    .columns3 .c
    {
    //margin-left: 67%;
    }
    .columns3 .r .r
    {
    display: block;
    //top: -100%;
    width: auto;
    //width: 100%;
    padding: 0 1em;
    }
    .columns3 .a .r
    {
    padding-left: 0;
    }
    .columns3 .c .r
    {
    padding-right: 0;
    }
    </style>
    <div class="columns3">
        <div class="r">
            <div class="a">
                <div class="r">0<br />1<br />2<br />3<br />4<br />5</div>
            </div>
            <div class="b">
                <div class="r">0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9</div>
            </div>
            <div class="c">
                <div class="r">0<br />1<br />2<br />3</div>
            </div>
        </div>
    </div>