Question

我正在为一个网站制作一个模板，我遇到了一些非常基本的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为空看到该框内的边距。我不希望透明背景出现在这些地方。怎么做到这一点？我甚至完全采用了正确的设计方法吗？

谢谢！

Answer 1

<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;
}

使用此解决方案，父级的大小将设置子级的大小！

如果您希望孩子与父母有相对高度，您可以给他身高：等等，这样就可以了。

CSS：使child-div元素的高度和宽度X像素小于父元素的X像素

1 个答案: