HTMLの背景が表示されない

私はこの単純なコードを練習しています。をPの後ろに入れようとしたときに、(div) elementが表示されないのはなぜですか？私が欲しいのはdiv { background-color: purple; }です。はすべて私の `（p）セクション 'をカバーしています。HTMLの背景が表示されない

私のコード

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 

    <title>Boxes</title> 
<h1 align="center">My Boxes</h1> 


<style> 

div { 
    background-color: purple; 

} 


p { width: 50px; 
    height: 50px; 
    border: 2px solid black; 
    margin-bottom: 10px; 
    margin-right: 10px; 
    float:left; 
} 
h1 {margin-bottom: 80px; 
} 

* {box-sizing: border-box; 
margin: 0; 
padding: 0;} 

#box1 {background-color: yellow; 




} 
#box2 {background-color: red; 


} 
#box3 {background-color: blue; 
    clear:left; 

} 
#box4 {background-color: green;} 



</style> 
</head> 

<body> 
<div> 

<p id="box1"> </p> 
<p id="box2"> </p> 
<p id="box3"> </p> 
<p id="box4"> </p> 

</div> 


</body> 
</html>

出典

2016-10-04 Bruno 58

あなたは 'フロート追加したためです：要素はdivの内側に浮くとdiv要素は、任意の高さを取っていない理由があるになり、あなたの' p'にleft'を。要素を左に固定するために、このスタイルを追加する必要はありません。 – Rohit416

あなたのCSSでdivタグセレクタクラスであなただけのオーバーフローを使用することができます：あなたはPにフロートを使用していたとしてDIVに自動親の認識の高さにフロートをクリアする必要があります。

div { 
 
    background-color: purple; 
 
    overflow:auto; 
 

 
} 
 

 

 
p { width: 50px; 
 
    height: 50px; 
 
    border: 2px solid black; 
 
    margin-bottom: 10px; 
 
    margin-right: 10px; 
 
    float:left; 
 
} 
 
h1 {margin-bottom: 80px; 
 
} 
 

 
* {box-sizing: border-box; 
 
margin: 0; 
 
padding: 0;} 
 

 
#box1 {background-color: yellow; 
 

 

 

 

 
} 
 
#box2 {background-color: red; 
 

 

 
} 
 
#box3 {background-color: blue; 
 
    clear:left; 
 

 
} 
 
#box4 {background-color: green;}

<div> 
 

 
<p id="box1"> </p> 
 
<p id="box2"> </p> 
 
<p id="box3"> </p> 
 
<p id="box4"> </p> 
 

 
</div>

出典

2016-10-04 15:13:15

あなたはマークアップが<p>タグない<div>タグを使用しています。

#box1 p {background-color: yellow; } 
#box2 p {background-color: red; } 
#box3 p {background-color: blue; clear:left;} 
#box4 p {background-color: green; }

また、これは<body>の内側に属する：

<h1>My Boxes</h1>

出典

2016-10-04 04:33:46 Conor

ちょうどあなたが高入れ：100VHを。幅：100％;

div { 
 
    height:100vh; 
 
    width:100%; 
 
    background: purple; 
 
      
 
} 
 

 

 
p { width: 50px; 
 
    height: 50px; 
 
    border: 2px solid black; 
 
    margin-bottom: 10px; 
 
    margin-right: 10px; 
 
    float:left; 
 
} 
 
h1 {margin-bottom: 80px; 
 
} 
 

 
* {box-sizing: border-box; 
 
margin: 0; 
 
padding: 0;} 
 

 
#box1 {background-color: yellow; 
 

 

 

 

 
} 
 
#box2 {background-color: red; 
 

 

 
} 
 
#box3 {background-color: blue; 
 
    clear:left; 
 

 
} 
 
#box4 {background-color: green;}

<body> 
 
<div> 
 

 
<p id="box1"> </p> 
 
<p id="box2"> </p> 
 
<p id="box3"> </p> 
 
<p id="box4"> </p> 
 

 
</div>

出典

2016-10-04 04:40:29

HTMLの背景が表示されない

答えて

関連する問題