CSS：製作child-div元素的高度和寬度X像素小於父元素的

我正在爲網站製作模板，並且我遇到了一些非常基本的CSS問題。CSS：製作child-div元素的高度和寬度X像素小於父元素的

基本上，我試圖將網站分成使用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空白可以看到該框內的邊距。我不希望我的透明背景出現在這些地方。如何做到這一點？我甚至完全採用正確的設計方法嗎？

謝謝！

來源

2011-11-14 8bitcartridge

你有一個「divitis」的情況。 –

你可以嘗試填充，透明邊框或百分比寬度/高度 –

傑西：你的評論意味着糟糕的設計選擇，我懷疑可能是這種情況。我一定會考慮其他設計（並閱讀divitis，這似乎是一個普遍接受的術語:)）保羅：我想寬度/高度的百分比，但這不適用於我，因爲我想將相同的transDiv div-block粘貼在具有不同高度/寬度的各種不同div元素內，並具有一致的5像素邊框尺寸。我會在哪裏放置填充/透明邊框？我嘗試了兩個地方（在transDiv塊和latestBlockLeft塊），並且都不起作用 – 8bitcartridge

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

有了這個解決方案，父母的大小將設置孩子的大小！

如果你想要孩子有一個相對高度的父母，你可以給他身高:,等參數只是在這裏。

來源

2013-11-21 12:20:31 peterh

謝謝！這似乎也工作！ – 8bitcartridge

CSS：製作child-div元素的高度和寬度X像素小於父元素的

回答

相關問題