Во-первых, нажмите здесь, чтобы увидеть фактический эффект от работы. Эта страница может быть центрирована и легко адаптивна в браузерах Mozilla, Opera и IE. Давайте проанализируем код:
Полный код
<html>
<голова>
<style type="text/css">
тело{
фон:#999;
выравнивание текста: по центру;
цвет: #333;
семейство шрифтов: Arial, Verdana, без засечек;
}
#header{
ширина: 776 пикселей;
поле справа: авто;
поле слева: авто;
отступ: 0 пикселей;
фон: #EEE;
высота: 60 пикселей;
выравнивание текста: по левому краю;
} #содержать{
поле справа: авто;
поле слева: авто;
ширина: 776 пикселей;
} #mainbg{
ширина: 776 пикселей;
отступ: 0 пикселей;
фон: #60A179;
плавать: влево;
}
#верно{
плавать: вправо;
поле: 2 пикселя 0 пикселей 2 пикселя 0 пикселей;
отступ: 0 пикселей;
ширина: 574 пикселей;
фон: #ccd2de;
выравнивание текста: по левому краю;
}
#левый{
плавать: влево;
поле: 2 пикселя 2 пикселя 0 пикселей 0 пикселей;
отступ: 0 пикселей;
фон: #F2F3F7;
ширина: 200 пикселей;
выравнивание текста: по левому краю;
}
#footer{
ясно: оба;
ширина: 776 пикселей;
поле справа: авто;
поле слева: авто;
отступ: 0 пикселей;
фон: #EEE;
высота: 60 пикселей;}
.text{маржа:0px;padding:20px;}
</стиль>
</голова>
<тело>
<div id="header">заголовок</div>
<div id="содержать">
<div id="mainbg">
<div id="право">
<дел
class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div >
</div>
<div id="слева">
<div class="text">слева</div>
</div>
</div>
</div>
<div id="footer">нижний колонтитул</div>
</тело>
</html>
Затем определите два средних столбца #right и #left. Чтобы центрировать два средних столбца, мы вкладываем слой #contain за их пределы и устанавливаем для поля «contain» значение «contain», чтобы #right и #left естественным образом центрировались.
Обратите внимание на порядок определения двух средних столбцов. Сначала мы определяем #right и позволяем ему плавать в самой правой части слоя #contain с помощью float: right;. Затем определите #left и позвольте ему плавать слева от слоя #right с помощью float: left;. Это прямо противоположный порядку, в котором мы определили таблицу слева направо (Исправление: сначала слева, затем справа или сначала справа, затем слева, вы можете спроектировать его в соответствии со своими потребностями).
Мы видим, что между #contain и двумя столбцами кода находится слой #mainbg. Для чего используется этот слой? Этот слой используется для определения фона #contain. Вы наверняка спросите, а почему бы не определить фон прямо в #contain, а добавить еще один слой? Это связано с тем, что фон, определенный непосредственно в #contain, не будет отображаться в Mozilla, и необходимо определить значение высоты. Если значение высоты определено, слой #right не может автоматически масштабироваться в соответствии с содержимым. Чтобы решить проблемы с фоном и высотой, необходимо добавить такой слой #mainbg. Хитрость заключается в том, чтобы определить float: left; для слоя #mainbh, поскольку float автоматически задает атрибуты ширины и высоты слоя. (Давайте пока понимаем это так:)
Наконец, определите слой #footer внизу. Ключ к этому определению:clear:both;. Функция этого предложения — отменить плавающее наследование слоя #footer. В противном случае вы увидите #footer рядом с #header, а не под #right.
После определения основных слоев макет готов. Еще один момент: вы видели, что я также определил .text{margin:0px;padding:20px;} Функция этого класса — создать поле шириной 20 пикселей вокруг содержимого. Почему бы не определить поля или отступы непосредственно в #right Поскольку Mozilla и IE имеют противоречивые интерпретации блочной модели CSS, прямое определение полей/отступов приведет к деформации макета в Mozilla. Обычно я решаю проблему, помещая внутрь еще один слой.