Часто используемые методы для макета CSS: float:none|left|right.
Ценить:
нет:?Значение по умолчанию. Объект не плавает
слева: текст располагается справа от объекта
справа: текст располагается слева от объекта
Как это работает, смотрите на примере одной строки и двух столбцов.
xhtml-код:
| Ниже приводится цитируемое содержание: <div id="обертка"> <div id="column1">Это первый столбец</div> <div id="column2">Это второй столбец</div> <div class="clear"></div> /*Это противоречит целям веб-стандарта, это просто означает, что элементы ниже необходимо очистить*/ </div> |
CSS-код:
| Ниже приводится цитируемое содержание: #wrap{ширина:100;высота:авто;} #column1{float:left;width:40;} #column2{float:right;width:60;} .clear{очистить:оба;} |
позиция:статическая|абсолютная|фиксированная|относительная
Ценить:
static:?Значение по умолчанию. Никакого специального позиционирования, объект соответствует правилам позиционирования HTML.
Абсолютный:? Перетащите объект из потока документов и используйте атрибуты «левый», «правый», «верхний», «нижний» и другие для выполнения абсолютного позиционирования относительно ближайшего родительского объекта с наибольшим количеством настроек позиционирования. Если такого родительского объекта не существует, используется объект body. И его каскад определяется через атрибут z-index
исправлено:? Не поддерживается. Позиционирование объекта следует абсолютному методу. Но есть некоторые правила, которые следует соблюдать
относительный:?Объекты не могут быть сложены друг на друга, но будут смещены в обычном потоке документов на основе левого, правого, верхнего, нижнего и других атрибутов.
Он реализует пример одной строки и двух столбцов.
xhtml-код:
| Ниже приводится цитируемое содержание: <div id="обертка"> <div id="column1">Это первый столбец</div> <div id="column2">Это второй столбец</div> </div> |