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

回答

相关问题