div div中的HTML div

-4

請查看我的代碼並說出爲什麼div「bildunterschrift」不會顯示在「bild」div中。它始終在整個屏幕右邊緣的父div之外。我想在「bild」div的右下角有div「bildunterschrift」。div div中的HTML 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 2014-09-25 09:46:57

您已將其定位爲「絕對」。使用'position：relative'將元素定位到第一個父元素。 – PeeHaa 2014-09-25 09:48:13

@Benjamin然後div「bildunterschrift」在整個屏幕的右邊緣。：/ – 2014-09-25 09:49:47

添加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爲您的快速答案。 – 2014-09-25 09:51:24

改變這樣的，並嘗試： #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

div div中的HTML div

回答

相關問題