HTML div в div

-4

, пожалуйста, посмотрите мой код и скажите мне, почему div «bildunterschrift» не отображается в div «bild». Всегда находится вне родительского div в правом краю полного экрана. Я хочу иметь div «bildunterschrift» в правом углу div »bild».HTML div в div

Мой код:

<!--HTML code--> 

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 
<title>CSS3: Bild mit Bildbeschriftung</title> 
<link href="design2.css" type="text/css" rel="stylesheet"/> 

</head> 

<body> 

<h1>CSS3: Bild mit Beschriftung <i>via</i> CSS3</h1> 

<div id="bild"> 

<div id="bildunterschrift"> 
    Hundewelpe 
</div> 

</div> 

</body> 

</html>  



/* CSS code */ 

#bild 
{ 
background-color:hsla(0,100%,0%,1); 
height:340px; 
width:320px; 
} 
#bildunterschrift 
{ 
height:40px; 
width:320px; 
color:hsla(0,0%,0%,0.8); 
background-color:hsla(90,100%,60%,1); 
position:absolute; 
right:0px; 
bottom:0px; 
font-size:30px; 
}

источник

2014-09-25 Harald Wiesinger

насчет 'сверху: 0'? – Benjamin

Вы позиционировали его 'absolute'. позиционирование элемента первому родительскому элементу с «position: relative». – PeeHaa

@Benjamin, тогда div «bildunterschrift» находится в правом краю полного экрана. :/ –

Добавить position: relative; в #bild

JSFiddle - DEMO

#bild { 
    background-color:hsla(0, 100%, 0%, 1); 
    height:340px; 
    width:320px; 
    position: relative; 
}

источник

2014-09-25 09:48:20 Anonymous

он работает! thx для вашего быстрого ответа. –

изменения, как это и попробовать: #bildunterschrift { margin-top:295px;

height:40px;

width:320px;

color:hsla(0,0%,0%,0.8);

background-color:hsla(90,100%,60%,1);

float:right;

right:0px;

bottom:0px;

font-size:30px;

}

источник

2014-09-25 09:59:05 jkl

попробовать это

#bild { 
 

 
    background-color: hsla(0, 100%, 0%, 1); 
 

 
    height: 340px; 
 

 
    width: 320px; 
 

 
    position: relative; 
 

 
} 
 

 
#bildunterschrift { 
 

 
    height: 40px; 
 

 
    width: 320px; 
 

 
    color: hsla(0, 0%, 0%, 0.8); 
 

 
    background-color: hsla(90, 100%, 60%, 1); 
 

 
    position: absolute; 
 

 
    right: 0px; 
 

 
    bottom: 0px; 
 

 
    font-size: 30px; 
 

 
}

<h1>CSS3: Bild mit Beschriftung <i>via</i> CSS3</h1> 
 

 
<div id="bild"> 
 

 
    <div id="bildunterschrift"> 
 
    Hundewelpe 
 
    </div> 
 

 
</div>

источник

2014-09-25 10:28:07

HTML div в div

ответ

Смежные вопросы