Читайте также:
|
Фиксированный дизайн. Свойство float
Рассмотрим, как располагать рядом по горизонтали два и более слоя. По умолчанию, использование тега <div> для создания слоя, автоматически делает и перенос строки после него, поэтому несколько идущих подряд слоев выстраиваются по вертикали. Нас же интересует, а как сделать то же самое, но по горизонтали, чтобы можно было создать две колонки. Для решения данной задачи есть два подхода: первый основан на использовании свойства float, второй — на позиционировании элементов.
Использование свойства float
Чтобы расположить два слоя рядом друг с другом по горизонтали, воспользуемся стилевым свойством float со значением left. Эта конструкция говорит, что слой необходимо выровнять по левому краю и обтекать его по правой стороне. Таким образом, рядом лежащий второй слой будет пристыкован к первому справа.
Теоретически, свойство float достаточно задавать лишь для одного слоя из двух. Однако браузер Internet Explorer в этом случае между слоями добавляет небольшой промежуток, что не всегда желательно, а Firefox накладывает слои друг на друга. Чтобы все смотрелось именно так, как хочется, float следует указывать для всех слоев (пример 1).
Пример 1. Добавление свойства float
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title> Две колонки </title>
<style type="text/css" >
#leftcol { /* Левая колонка*/
width: 200px; /* Ширина слоя */
float: left; /* Состыковка с соседним слоем */
color: white; /* Цвет текста*/
padding: 10px; /* Поля вокруг текста */
background: #008000; /* Цвет фона левой колонки */
}
#rightcol { /* Правая колонка*/
width: 550px; /* Ширина слоя */
float: left; /* Состыковка с соседним слоем */
padding: 10px; /* Поля вокруг содержимого */
background: #e0e0e0; /* Цвет фона правой колонки */
}
</style>
</head>
<body>
<div id="leftcol" >... </div>
<div id="rightcol" >... </div>
</body>
</html>
Высота слоев определяется их содержимым, поэтому подход, показанный в данном примере, создаст две прямоугольные области разной высоты и цвета.
Главной особенностью приведенного подхода является тот момент, что при уменьшении окна браузера до 750 пикселов и меньше, слои располагаются по вертикали друг под другом (рис. 1). Иными словами, макет «рассыпается» на отдельные блоки.
Рис. 1. Вид макета при уменьшении размера окна браузера
Чтобы подобная ситуация не происходила, следует воспользоваться свойством margin.
Дата добавления: 2015-08-20; просмотров: 54 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| На чем? | | | Пример 2. Двухколонный макет |