Мне нужен CSS для ребенка, который принимает полную ширину тела, но не выходит из потока (без использования Javascript). Я уже пробовал это:
position: absolute;
left: 0;
width: 100%;
Но это заставляет ребенка вырваться из потока. Вот пример: http://jsfiddle.net/v5Mq4/ Высота абсолютно позиционированного дочернего элемента является переменной. Таким образом, margin-bottom или margin-top не применяются.
вы можете достичь этого, смешивая использование относительных и абсолютных div.
Классы CSS
.relative {
position: relative;
width: 200px;
height: 400px;
background-color: red;
}
.absolute {
position: absolute;
top: 120px;
left: -100px;
width: 200%;
height: 200px;
background-color: black;
}
и DIVS
<div width='100%' align='center'>
<div class='relative'>
<div class='absolute'>
</div>
</div>
</div>
Кроме того, вам нужен другой родительский контейнер (или тело) для центрирования содержащихся элементов.
Здесь jsFiddle с решением в нем.
http://jsfiddle.net/mgleeson/35vDd/
Приветствия.
Абсолютное позиционирование удаляет элемент из потока документов.
Вы можете делать то, что собираетесь, но вам нужно будет заполнить свой макет, создав разрыв разного размера. Вы можете сделать это, добавив margin-bottom к предыдущему элементу.