CSS & # 8220; valign & # 8221; позиционирование

Question

<div>
<h1>Title</h1>
<table>
...
</table>
</div>

Теперь

<h1>

имеет поле: 0; так что это наверху div. Высота div составляет 300 пикселей.

Однако я бы хотел, чтобы таблица располагалась внизу div, например. VALIGN = & Quot; нижняя & Quot; но для всей таблицы.

Answer 1

Попробуйте это: http://jsbin.com/emoce

Хотя это похоже на решение Дэррила. За исключением того, что я не использую position: absolute для упаковочного div, а скорее position: относительный, чтобы сделать положение таблицы абсолютным для этого.

Answer 2

Вот что предложил Реми Шарп:

<style type="text/css" media="screen">
#container { 
    position: relative; 
    margin: 0;
    height:300px;
    border:1px solid #000; 
}
#container h1 { 
    margin:0; 
}
#tableLayout { 
    position: absolute;
    bottom:0; 
    border: 1px solid #c00;
}
</style>

<div id="container">
    <h1>Title</h1>
    <table id="tableLayout">
      <tr><td>example cell</td></tr>
    </table>
</div>

Похоже, это работает!

Я разместил его здесь, так что он всегда будет здесь.

Answer 3

Как насчет этого?

<style type="text/css">
#container { 
    position: absolute; 
    margin: 0;
    height:300px;
    border:1px solid #000; }
#container h1 { 
    margin:0; }
#tableContainer { 
    position: absolute;
    bottom:0; }
</style>

<div id="container">
    <h1>Title</h1>
    <div id="tableContainer">
        <table id="tableLayout">
            <tr><td>...</td></tr>
        </table>
    </div>
</div>

Единственная проблема заключается в том, что div-контейнер и div-таблицы tableContainer должны быть расположены абсолютно. Не уверен, что это будет работать для вашего макета.