Fatal编程技术网
  • html/
  • div中的HTML div

div中的HTML div

html css

div中的HTML div,html,css,xhtml,Html,Css,Xhtml,请看我的代码，告诉我为什么div bildunterschrift不显示在bild div中。它总是在整个屏幕右边缘的父div之外。我想让bildunterschrift分区在bild分区的右角 我的代码： 添加位置：相对位置；致《图片报》 JSFiddle- 像这样更改，然后尝试： 比尔登特裂谷 { 利润上限：295像素 高度：40px 宽度：320px 颜色：hsla0,0%，0%，0.8 背景色：HSLA90100%，60%，1 浮动：对 右：0px 底部：0px 字体大小：30px }试

请看我的代码，告诉我为什么div bildunterschrift不显示在bild div中。它总是在整个屏幕右边缘的父div之外。我想让bildunterschrift分区在bild分区的右角

我的代码：

添加位置：相对位置；致《图片报》

JSFiddle-

像这样更改，然后尝试： 比尔登特裂谷 { 利润上限：295像素

高度：40px

宽度：320px

颜色：hsla0,0%，0%，0.8

背景色：HSLA90100%，60%，1

浮动：对

右：0px

底部：0px

字体大小：30px

}试试这个 图片报{ 背景色：hsla0，100%，0%，1； 高度：340px； 宽度：320px； 位置：相对位置； } 比尔登特裂谷{ 高度：40px； 宽度：320px； 颜色：hsla0，0%，0%，0.8； 背景色：hsla90、100%、60%、1； 位置：绝对位置； 右：0px； 底部：0px； 字体大小：30px； } CSS3:Bild mit Beschriftung通过CSS3 亨德韦尔普
那么top:0呢？您已将其定位为绝对值。使用position:relative将元素定位到第一个父元素，然后div bildunterschrift位于整个屏幕的右边缘：/ 
<!--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;
}

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