Читайте также:
|
<!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>
</head>
<body>
<div id="container" >
<div id="leftcol" >... </div>
<div id="rightcol" >... </div>
</div>
<div style="clear: left" >... </div>
</body>
</html>
Стиль для данного примера останется неизменным и только добавляется тег <div> с атрибутом style="clear: left". Значение свойства clear обычно совпадает со значением float.
Резюме
При верстке двухколонного макета очень часто применяется свойство float, который добавляется к каждому слою. Хотя этот атрибут предназначен для создания обтекания, за счет своей универсальности он уже давно взят на вооружение верстальщиков. Принцип его применения следующий. Вокруг слоя при добавлении float создается обтекание, но поскольку ширина каждого слоя жестко задана, то слои располагаются не друг под другом, а рядом по горизонтали. При этом и формируются колонки макета.
Такой способ создания многоколонного макета имеет и определенный недостаток, который проявляется в том, что при уменьшении окна браузера до определенной величины, колонки «перепрыгивают» одна под другую. Чтобы этого избежать дополнительно используют стилевое свойство margin-left, добавляя его к правой колонке. В таком случае слои остаются на своих исходных местах, независимо от размеров окна браузера.
Float
Дата добавления: 2015-08-20; просмотров: 47 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Пример 2. Двухколонный макет | | | Описание |