html css初心者のものです。
質問の通り、パソコンのサイズに画面を広げても、四つの色の塊が2×2の配置になるようにしたいです。
.color{
width: 50%;
}
これで、二つの色で、合計100%になって、2×2になると思ったんですけど、うまくいきませんでした。
box-sizing: border-boxを指定してるので、paddingは関係ないと思いますし、なぜできないのか理由を教えていただけたらありがたいです。
html
1<html> 2<head> 3 <meta charset="utf-8"> 4 <title>lesson_php</title> 5 <link rel="stylesheet" href="stylesheet.css"> 6<head> 7<body> 8 <header> 9 <div class="container"> 10 <h1>画像のレイアウトの練習ページ</h1> 11 </div> 12 </header> 13 14 <div class="top-wrapper"> 15 <div class="container"> 16 <div class="colors"> 17 <div class="color"> 18 <div class="color-red ">aka</div> 19 </div> 20 <div class="color"> 21 <div class="color-black ">black</div> 22 </div> 23 <div class="color"> 24 <div class="color-green">green</div> 25 </div> 26 <div class="color"> 27 <div class="color-yellow">yellow</div> 28 </div> 29 </div> 30 </div> 31 </div> 32 33 34</body> 35</html> 36
css
1body { 2 margin: 0; 3} 4* { 5 box-sizing: border-box; 6} 7.container { 8 margin: 0 auto; 9 width: 100%; 10 background-color: gold; 11 padding: 0 14px; 12} 13 14.top-wrapper { 15 padding: 100px 40px; 16} 17.colors { 18 color:white; 19 background-color: gray; 20 padding: 20px; 21 text-align: center; 22 23} 24.color { 25 display: inline-block; 26 27} 28.color-red { 29 background-color: red; 30 width: 250px; 31 height: 250px; 32} 33 34.color-green { 35 background-color: green; 36 width: 250px; 37 height: 250px; 38} 39 40.color-yellow { 41 background-color: yellow; 42 width: 250px; 43 height: 250px; 44} 45 46.color-black { 47 background-color: black; 48 width: 250px; 49 height: 250px; 50} 51
回答5件
あなたの回答
tips
プレビュー