У меня есть div без фиксированной ширины (этот div должен иметь ширину как содержание), в нем есть div с position:absolute и фиксированной шириной, но относительный div имеет 0px ширину, как я могу ее исправить ?Ширина div с положением: абсолютное содержание
<div class="container" style="position:relative">
<div class="innerContainer" style="position: absolute; width: 30px; height: 10px"></div>
</div>Абсолютный позиционируются DIV берется из нормального потока, и как таковые не влияет, в данном случае, его родительская высота. Родитель отобразит, поскольку не было содержимого (0px high).
В вашем случае вам нужно предоставить родительскому (контейнеру) высоту, достаточную для того, чтобы содержание абсолютного положения соответствовало или заполняло его нормальным текущим контентом, и располагайте внутренний div, расположенный слева и внизу, как это.
.container {
position:relative;
min-height: 50px;
background: gray;
padding-left: 40px;
}
.innerContainer {
position:absolute;
left: 0;
top: 0;
width: 30px;
height: 10px;
background: darkgray;
}
.innerContainer:nth-child(2) {
top: auto;
bottom: 0;
background: lightgray;
}<div class="container">
<div class="innerContainer"></div>
<div class="innerContainer"></div>
</div>
<br>
<div class="container">
<div class="innerContainer"></div>
<div class="innerContainer"></div>
This has text that sizes itself<br>
This has text that sizes itself<br>
This has text that sizes itself<br>
</div>
вы можете создать snippen с соответствующим кодом? – silviagreen
Абсолютно позиционированные элементы полностью удалены из потока документов. Таким образом, вы должны указать ширину для родителя. – nikhil
Абсолютные позиционированные divs расположены * по отношению * к их относительному предку, но они не составляют часть макета и поэтому не вносят вклад в ширину или высоту предка. –