Ширина div с абсолютной позицией зависит от ширины его родителя? - PullRequest
Новая
       1

Ширина div с абсолютной позицией зависит от ширины его родителя?

6 голосов
/ 16 марта 2012

Я хотел бы иметь ширину div с абсолютной позицией, зависящей от его содержимого, а не от его родителя.Например, 

<div style="position:absolute">
 <div style="position:absolute">
  <div style="position:absolute">Div in Div</div>
 </div>
</div>

приведет к переносу слов, как показано в http://jsfiddle.net/ymgfN/2/

Похоже, что ширина внутреннего div будет зависеть от ширины его родителя, даже если его позиция абсолютна.Например, если мы укажем width для его родителя, он будет работать должным образом (без переноса слов): http://jsfiddle.net/ymgfN/3/

К сожалению, я не могу заранее указать ширину родителя - в итоге у меня будет егоШирина зависит от его детей.И я должен использовать абсолютную позицию.Возможно ли это в чистом CSS?

Некоторое предыстория: я не пытаюсь сделать страницу, чтобы выполнить какой-то дизайн - я знаю, что безумно иметь три сложенных абсолютных положения для любого разумного требования.Скорее, я провожу некоторый эксперимент, чтобы увидеть, может ли абсолютное позиционирование быть общим подходом для решения ряда проблем компоновки (универсальная сложная компоновка, которая обычно требует умного использования static / absolute / float).К сожалению, я столкнулся с этой проблемой, которая сделает идею использования абсолютной позиции везде глупой.

Ответы [ 2 ]

15 голосов
/ 16 марта 2012

Элемент получает свою ширину и высоту до того, как он будет удален из потока документа.Когда вы позиционируете внешний элемент абсолютно, он удаляется из потока и, поскольку у него нет непосредственного содержимого, он имеет ширину 0 и высоту 0. Поэтому другой элемент деления внутри него, пытающийся добавить текст, наследует ширину родительского элемента, равную 0.Таким образом, он будет расширяться до ширины самого длинного слова, чтобы разрешить содержание, а затем разбивать все остальное на новые строки. После того, как это сделано, он удаляет элемент из потока документа, чтобы отключить его самостоятельно.

Итак, чтобы ответить на ваш первый вопрос, yes ,абсолютно позиционированный элемент обращает внимание на размеры его родительского элемента, если вы не указываете ширину и / или высоту самого элемента.Вы знаете, какой должна быть ширина ваших детей?

Что касается вашего второго вопроса ... вы можете использовать white-space: nowrap.Не очень хорошее решение.Более предпочтительно, найдите лучший способ упорядочить ваш контент, чтобы вам не понадобилось три абсолютно позиционированных элемента, вложенных друг в друга.Вы говорите, что у есть , чтобы использовать их ... Правда?Скорее всего, вы просто не нашли лучшего способа сделать это, но для другого вопроса, если вы решите пойти по этому пути.

5 голосов
/ 18 ноября 2015

Элемент уровня блока с position: absolute или fixed автоматически привязывается к ширине родительского элемента, если не установлено фиксированное значение width.Если вам не нужна фиксированная ширина для дочернего элемента, вы можете эффективно обойти это, задав ему очень высокое значение margin-right, например 

.inner-div {
    position: absolute;
    margin-right: -10000px;
}

Тогда его ширина будет привязана к ширинеродительский минус минус отрицательное поле, поэтому на практике будет зависеть только от его содержимого.

Обновленная скрипта: http://jsfiddle.net/ymgfN/53/

...