[英]How to get min height/width of parent element and set to it's child height/width by CSS
[英]CSS: Making a child-div element's height and width X pixels smaller than the parent element's
我正在为一个网站制作一个模板,我遇到了一些非常基本的CSS问题。
基本上,我试图将网站划分为使用div元素的部分,我希望每个部分都包含一个半透明的黑色背景,周围有完全透明的边框。
这个想法是有一个背景图像,并且会有新闻项目分成黑色块,这些块实际上并没有相互接触或重叠(也就是说,它们周围有边缘)。 黑色块略微透明,它们之间的区域(大小只有几个像素)没有内容,你只能看到背景。
我到目前为止的内容如下:
网站:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="mainPage.css" />
<title>Some site</title>
</head>
<body>
<div class="container">
<div class="header">
<img src="images/SomeImage.bmp" alt="ImageName"/>
</div>
<div class="latestBlockLeft">
<div class="transDiv">
<p> latestBlockLeft1 </p>
</div>
</div>
<div class="randomBlockRight">
<h1> Heading test</h1>
<p> randomBlockRight </p>
</div>
<div class="latestBlockLeft">
<div class="transDiv">
<p> latestBlockLeft2 </p>
</div>
</div>
<div class="latestBlockLeft">
<div class="transDiv">
<p> latestBlockLeft3 </p>
</div>
</div>
<div class="menuStrip">
<p> menuStrip </p>
</div>
<div class="sectionedNews">
<p> sectionedNews </p>
</div>
<div class="disclaimer">
<p> disclaimer </p>
</div>
</div>
</body>
相关的CSS代码:
html, body {padding: 0px; margin: 0px; height: 100%;}
body
{
background-color:white;
font-size:100%;
background-image:url('images/Famicom cartridges.jpg');
background-attachment:fixed;
}
h1
{
background-color:transparent;
color:#8B0000;
}
/* Link style */
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
/* Classes */
.container
{
background-color:beige;
width: 1020px;
margin: 0 auto;
}
.transDiv
{
position:relative;
float:left;
color:white;
width:100%;
height:100%;
background-color: black;
opacity: 0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
}
.header
{
height: 120px;
width: 100%;
background-color: black;
margin: 0 auto;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.latestBlockLeft
{
/* padding-top:3px;
padding-right:3px; */
height: 170px;
width: 70%;
/* background-color: yellow;*/
float: left;
}
.randomBlockRight ........... and so on
如果我尝试使用边距,那么一直发生的事情是边缘围绕div分区并将我的其他元素推到页面上的所有位置。 我可以使用每个元素的精确像素大小来制作它,但是我希望能够说div块占据我的主容器div宽度的70%并且Xpix为空看到该框内的边距。 我不希望透明背景出现在这些地方。 怎么做到这一点? 我甚至完全采用了正确的设计方法吗?
谢谢!
<div id="parent"><div id="child"></div></div>
1)父div必须具有“position:absolute”或“position:relative”。 然后你可以这样做:
#parent {
display: block;
position: relative;
}
#child {
position: absolute;
display: block;
top: 0;
right: 0;
bottom: -10px; // HERE IS THE TRICK!
left: 0;
}
使用此解决方案,父级的大小将设置子级的大小!
如果你想让孩子与父母有一个相对高度,你可以给他身高:等等,这就像这里一样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.