Позиционирование элементов div

Question

У меня проблема с выравниванием содержимого div в разделителе данных. Data div не был установлен высота. Потому что это был автоматический рост, когда содержание div увеличивается.

Но он собирался выйти из потока. Как его решить?

.container 
 
{ 
 
    position:relative; 
 
    border:1px solid blue; 
 
    margin:auto; 
 
    width:200px; 
 
} 
 

 
.data 
 
{ 
 
    position:relative; 
 
    border:1px solid green; 
 
    width:100px; 
 
    top:10px; 
 
    left:10px; 
 
} 
 

 
.hed 
 
{ 
 
    position:absolute; 
 
    border:1px solid orange; 
 
    width:30px; 
 
    height:10px; 
 
    top:-5px; 
 
    left:10px; 
 
    border-radius:5px; 
 
    background-color:orange; 
 
    line-height:10px; 
 
}

<div class="container"> 
 
    <div class="data"> This is absolute.</div> 
 
    <div class="hed">xxx</div> 
 
</div>

Answer 1

Если вы хотите иметь container расширить как data ДИВ расширяется, добавьте <br style = "clear:both"> перед тем закрытие div тег.

FIDDLE

Answer 2

Вы можете установить

overflow:hidden; 

в "контейнер" ДИВ

Answer 3

изменить все css позиции в relative и использовать min-height попробуйте

как этого

.container { 
    position:relative; 
    border:1px solid blue; 
    margin:auto; 
    width:200px; 
    min-height:10px; //added 
} 
.data { 
    position:relative; 
    border:1px solid green; 
    width:100px; 
    top:10px; 
    left:10px; 
} 
.hed { 
    position:relative; //changed 
    border:1px solid orange; 
    width:30px; 
    height:10px; 
    top:-50px; //changed 
    left:10px; 
    border-radius:5px; 
    background-color:orange; 
    line-height:10px; 
} 

WORKING DEMO

Answer 4

Почему вы используете для сНа класса = "данных" :

• топ
• покинул

Вы Juste должны заменить их маржи-топ и края левого.

.container 
 
{ 
 
    position:relative; 
 
    border:1px solid blue; 
 
    margin:auto; 
 
    width:200px; 
 
} 
 

 
.data 
 
{ 
 
    position:relative; 
 
    border:1px solid green; 
 
    width:100px; 
 
    margin-top:10px; // changed 
 
    margin-left:10px; // changed 
 
} 
 

 
.hed 
 
{ 
 
    position:absolute; 
 
    border:1px solid orange; 
 
    width:30px; 
 
    height:10px; 
 
    top:-5px; 
 
    left:10px; 
 
    border-radius:5px; 
 
    background-color:orange; 
 
    line-height:10px; 
 
}

<div class="container"> 
 
    <div class="data"> This is absolute.</div> 
 
    <div class="hed">xxx</div> 
 
</div>