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

发布于 2024-12-15 09:03:10 字数 3090 浏览 1 评论 0原文

我正在为一个网站制作模板，但在一些非常基本的 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'm making a template for a website and I'm getting some issues with some very basic CSS.

Basically, I'm trying to divide the site up into sections using div elements, and I want each section to contain a semi-transparent black background with a completely transparent border around it.

The idea is that there is a background image and there would be news-items sectioned off into black blocks that don't actually touch or overlap each other (that is to say, they have margins around them). The black blocks are slightly see-through and the areas between them (which will be a few pixels in size) are empty of content and you can just see the background.

What I have so far is as follows:

The site:

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

The relevant CSS code:

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

What keeps happening if I try and use margins is that the margin goes around the div division and pushed my other elements all over the place on the page. I could make this using exact pixel sizes for each element, but I want to be able to say that a div block takes up 70% of my main container div width and has Xpix empty see through margins inside that box. I don't want my transparent background appearing in these places. How does one do this? Am I even taking the correct design approach altogether?

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

Smile简单爱 2024-12-22 09:03:10

<div id="parent">
    <div id="child">
    </div>
</div>

父 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: 等参数，就像这里一样。

<div id="parent">
    <div id="child">
    </div>
</div>

The parent div must have position: absolute or position: relative. Then you can do this:

#parent {
    display: block;
    position: relative;
}

#child {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: -10px; // HERE IS THE TRICK!
    left: 0;
}

With this solution, the size of the parent will set the size of the child!

If you want the child to have a relative height to the parent, you can give him height:, etc params just so as here.

回复收藏 0 原文

~没有更多了~