CSS "valign" позиционирование

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

Сейчас

<h1>

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

Однако я бы хотел, чтобы таблица была размещена в нижней части div, например. valign = "bottom", но для всей таблицы.

html css xhtml positioning

23.10.2008 13:54

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

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

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 135

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 должны иметь абсолютное позиционирование. Не уверен, подойдет ли это для вашего макета.

23.10.2008 14:03

Ответ принят как подходящий

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

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

23.10.2008 14:14

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

<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>

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

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

23.10.2008 14:16