CSS & # 8220; valign & # 8221; позиционирование
-
04-07-2019 - |
Вопрос
<div>
<h1>Title</h1>
<table>
...
</table>
</div>
Теперь
<h1>
имеет поле: 0; так что это наверху div. Высота div составляет 300 пикселей.
Однако я бы хотел, чтобы таблица располагалась внизу div, например. VALIGN = & Quot; нижняя & Quot; но для всей таблицы.
Решение
Попробуйте это: http://jsbin.com/emoce
Хотя это похоже на решение Дэррила. За исключением того, что я не использую position: absolute для упаковочного div, а скорее position: относительный, чтобы сделать положение таблицы абсолютным для этого.
Другие советы
Вот что предложил Реми Шарп:
<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>
Похоже, это работает!
Я разместил его здесь, так что он всегда будет здесь.
Как насчет этого?
<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 должны быть расположены абсолютно. Не уверен, что это будет работать для вашего макета.