Ребенок принимает всю ширину тела, не вырываясь из потока

Question

Ребенок принимает всю ширину тела, не вырываясь из потока

0

Мне нужен CSS для ребенка, который принимает полную ширину тела, но не выходит из потока (без использования Javascript). Я уже пробовал это:

position: absolute;
left: 0;
width: 100%;

Но это заставляет ребенка вырваться из потока. Вот пример: http://jsfiddle.net/v5Mq4/ Высота абсолютно позиционированного дочернего элемента является переменной. Таким образом, margin-bottom или margin-top не применяются.

Alam Kanak 20 дек. 2013, в 22:43

Источник

0

что ты имеешь в виду нарушить поток? Что это делает сейчас?
bobek 20 дек. 2013, в 21:24
0

Дочерние элементы, которые идут после абсолютно позиционированного дочернего элемента, занимают его место, как будто его нет в потоке документов. Я хочу, чтобы абсолютно позиционированный дочерний элемент занял заданную высоту в родительском контейнере.
Raquib-ul Alam Kanak 20 дек. 2013, в 21:28
0

Как выглядит ваш HTML? Раздел средней / полной ширины не может быть включен в поток, потому что он нарушает границу поля # parent. Включите то, что вы уже написали, а не только произвольный CSS.
psdpainter 20 дек. 2013, в 21:31
0

@AlamKanak Хмммм, рост ребенка фиксирован? Или это изменится?
bobek 20 дек. 2013, в 21:44
0

Высота меняется. Это зависит от содержимого внутри. Вот пример: jsfiddle.net/v5Mq4
Raquib-ul Alam Kanak 20 дек. 2013, в 21:45

Показать ещё 3 комментария

Теги:

html

css

css-position

2 ответа

Ещё вопросы

что ты имеешь в виду нарушить поток? Что это делает сейчас?
Дочерние элементы, которые идут после абсолютно позиционированного дочернего элемента, занимают его место, как будто его нет в потоке документов. Я хочу, чтобы абсолютно позиционированный дочерний элемент занял заданную высоту в родительском контейнере.
Как выглядит ваш HTML? Раздел средней / полной ширины не может быть включен в поток, потому что он нарушает границу поля # parent. Включите то, что вы уже написали, а не только произвольный CSS.
@AlamKanak Хмммм, рост ребенка фиксирован? Или это изменится?
Высота меняется. Это зависит от содержимого внутри. Вот пример: jsfiddle.net/v5Mq4

Mike · Answer 1 · 2013-12-20T19-27-00.000Z

вы можете достичь этого, смешивая использование относительных и абсолютных 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/

Приветствия.

Diodeus - James MacFarlane · Answer 2 · 2013-12-20T18-28-00.000Z

Абсолютное позиционирование удаляет элемент из потока документов.

Вы можете делать то, что собираетесь, но вам нужно будет заполнить свой макет, создав разрыв разного размера. Вы можете сделать это, добавив margin-bottom к предыдущему элементу.

Но высота может быть разной. Я бы не знал высоты заранее.