CSS: уменьшение высоты и ширины дочернего элемента div на X пикселей по сравнению с родительским элементом - PullRequest
Новая
       22

CSS: уменьшение высоты и ширины дочернего элемента div на X пикселей по сравнению с родительским элементом

6 голосов
/ 15 ноября 2011

Я делаю шаблон для веб-сайта, и у меня возникают некоторые проблемы с очень простым 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 занимает 70% от ширины div моего основного контейнера и в нем пустые Xpix, просматривающие поля внутри этого поля. Я не хочу, чтобы мой прозрачный фон появлялся в этих местах. Как это сделать? Я вообще вообще выбираю правильный подход к дизайну?

Спасибо!

1 Ответ

3 голосов
/ 21 ноября 2013 
<div id="parent"><div id="child"></div></div>

1) Родительский div должен иметь «position: absolute» или «position: относительный».Затем вы можете сделать это: 

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

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

С этим решением размер родительского элемента будет устанавливать размер дочернего элемента!

Если вы хотите, чтобы у дочернего элемента была относительная высота относительнородитель, вы можете дать ему высоту: и т. д. параметры так же, как здесь.

...