Если мы хотим добавить строку нижнего колонтитула в конце макета из трех столбцов, чтобы разместить такую информацию, как авторские права. Я столкнулся с проблемой выравнивания нижней части трех столбцов. В макете таблицы мы используем метод вложения больших таблиц в маленькие, что позволяет легко выровнять три столбца по макету div, три столбца разбросаны независимо, а содержимое имеет разную высоту, что затрудняет выравнивание; Фактически, мы можем полностью вложить элементы div и поместить три столбца в один DIV, чтобы добиться выравнивания по нижнему краю. Ниже приведен пример реализации (белый фоновый блок имитирует страницу):
Тело
Основной код этой страницы-примера выглядит следующим образом:
<div id="header"></div>
<div id="mainbox">
<div id="menu"></div>
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
Конкретные таблицы стилей описаны в соответствующих разделах. Ключевым моментом является то, что слой #mainbox вложен в три слоя: #menu, #sidebar и #content. Когда содержимое #content увеличивается, высота #content увеличивается, высота #mainbox также увеличивается, а слой #footer автоматически перемещается вниз. Это обеспечивает высокую степень адаптивности.
Также стоит отметить, что #menu и #content плавают в правой части страницы «FLOAT: right;», #sidebar плавает в левой части слоя #menu «FLOAT: left;», это Плавающий метод позиционирования, и вы также можете использовать Абсолютное позиционирование, используемое для достижения этого эффекта.
Другая проблема этого метода заключается в том, что фон боковой панели #sidebar не может быть 100%. Общее решение — заполнить его цветом фона тела. (Цвет фона #mainbox использовать нельзя, поскольку цвет фона #mainbox недопустим в таких браузерах, как Mozilla.)
Итак, основной каркас построен, осталось только добавить к нему кирпичи и плитки. Если вы хотите попробовать другие макеты, рекомендую прочитать следующие статьи:
16 примеров CSS-разметки
onestab: демонстрация составного макета из трех столбцов
onestab: свободно растягиваемый трехколоночный макет.
