htmlのコンテナが背景色を表示しないのはなぜですか？

class = containerでdivの背景色を変更しようとしていますが、動作しません。以下はコードです。背景色と位置要素がどのようにリンクしているのか理解できません。htmlのコンテナが背景色を表示しないのはなぜですか？

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
background-color:hotpink; 
    margin: 0; 
    padding: 0; 
} 

.container { 
background-color:green; 
    position: relative; 
    width: 100%; 
} 

.right { 
    position: absolute; 
    right: 0px; 
    width: 300px; 
    background-color: #b0e0e6; 
} 
</style> 
</head> 
<body> 

<div class="container"> 
    <div class="right"> 
    <p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p> 
    </div> 
</div> 

</body> 
</html>

出典

2016-06-16 Talib Shaikh

は罰金ですか？ https://plnkr.co/edit/QPEs6Uwbw8Lyxq5WkwWy?p=preview –

@SatejS OPはコンテナのBGの緑色を使用しています...コードを確認してください... –

問題は、内容は、外側のdivは0に崩壊します。それはそこにある、あなたはそれを見ていない。 –

チェックFiddle Here ...

は私が.container & .rightためpositionプロパティを削除し、以下のコードをチェックし、.rightクラスにfloat:rightを使用していました。

CSS

body { 
    background-color:hotpink; 
    margin: 0; 
    padding: 0; 
} 

.container { 
    background-color:green; 
    width: 100%; 
} 

.right { 
    float:right; 
    width: 300px; 
    background-color: #b0e0e6; 
} 

.clearfix{ 
    clear:both; 
}

HTML

<div class="container"> 
    <div class="right"> 
    <p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p> 
    </div> 
    <div class="clearfix"></div> 
</div>

出典

2016-06-16 07:03:12

htmlのコンテナが背景色を表示しないのはなぜですか？

答えて

関連する問題