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

rxztt3cl 于 2022-12-05 发布在其他

关注(0)|答案(1)|浏览(251)

我正在为一个网站制作一个模板，我得到了一些非常基本的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空的透视边距。I don "我不希望我的透明背景出现在这些地方。一个人怎么做到这一点？我甚至采取了正确的设计方法完全？
谢谢你!

css

来源：https://stackoverflow.com/questions/8129043/css-making-a-child-div-elements-height-and-width-x-pixels-smaller-than-the-par

1条答案

按热度按时间

abithluo1#

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

有了这个解决方案，父的大小将设置子的大小！
如果你想让子对象相对于父对象有一个相对高度，你可以给予他height:等参数，就像这里一样。

赞(0）回复(0）举报 2022-12-05

我来回答

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

1条答案

相关问题

热门标签

最新问答