cssで同心円カラーブロックを作成するには？

は、私は次のコードを使用して同心円状の複数の埋め込まれたカラーブロックを作ってみました：cssで同心円カラーブロックを作成するには？

#div1, #div2, #div3, #div4, #div5 { 
 
    width: 300px; 
 
    height: 300px 
 
} 
 
#div1 { 
 
    background: yellow; 
 
} 
 
#div2 { 
 
    background: orange; 
 
    padding: 50px; 
 
} 
 
#div3 { 
 
    background: red; 
 
    padding: 100px; 
 
} 
 
#div4 { 
 
    background: purple; 
 
    padding: 150px; 
 
}

<div id="div4"> 
 
    <div id="div3"> 
 
    <div id="div2"> 
 
     <div id="div1"></div> 
 
    </div> 
 
    </div> 
 
</div>

をしかし、これは私が得るものです：

DIV1とDIV2ブロックが同心円状に埋め込みます期待どおりに、他の2つの外側のブロックは、パディングで崩壊するようです。コードの何が間違っていますか？

出典

2016-07-23 Gropai

最も内側の要素にはwidthとheightを設定する必要があります。残りのサイズはpaddingとすることができます。最も外側の要素にdisplay: inline-blockを入れて伸ばしないようにするか、widthを500pxに設定します。

#div1 { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: yellow; 
 
} 
 
#div2 { 
 
    background: orange; 
 
    padding: 50px; 
 
} 
 
#div3 { 
 
    background: red; 
 
    padding: 50px; 
 
} 
 
#div4 { 
 
    background: purple; 
 
    padding: 50px; 
 
    display: inline-block; 
 
}

<div id="div4"> 
 
    <div id="div3"> 
 
    <div id="div2"> 
 
     <div id="div1"></div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-07-23 02:42:56 4castle

これはあなたのために働く必要があります。

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<style> 
#div1 { 
width: 300px; 
height: 300px; 
background: yellow; 
margin: auto; 
} 
#div2 { 
background: orange; 
padding: 50px; 
} 
#div3 { 
background: red; 
padding: 50px; 
} 
#div4 { 
background: purple; 
padding: 50px; 
} 
</style> 
</head> 
<body> 
</html>

出典

2016-07-23 02:48:38 kfreeman04208

cssで同心円カラーブロックを作成するには？

答えて

関連する問題