サイトから例題をとって練習中の独学者です。
3列目が横にどうしても並ばないのですが、どうしてでしょうか?
私の書いたコードは以下の通りです。
サイズをボーダーボックスにしてるので、中身が大きいということはないと思うし、フロートを解除してみたりもしたのですが、崩れてしまいます。
なんと説明したらいいか分からないので、コードをすべてコピーしてみました。
どうかよろしくお願いします。
HTML
1<!doctype html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="main.css"> 6 </head> 7<div class="wrapper clearfix"> 8 <div class="container-1"> 9 <div class="red"></div> 10 <div class="yellow"></div> 11 </div> 12 <div class="container-2"> 13 <div class="blue"></div> 14 <div class="green"></div> 15 </div> 16 <div class="container-3"> 17 <div class="black"></div> 18 <div class="pink"></div> 19 </div> 20</div> 21 22</html>コード
css
1@charset "ute-8"; 2 3.clearfix::after { 4 display: block; 5 content: ""; 6 clear: both; 7} 8 9.wrapper { 10 width: 600px; 11 height: 600px; 12 box-sizing: border-box; 13 14} 15.container-1 { 16 width: 200px; 17 box-sizing: border-box; 18 float: left; 19 20} 21.red { 22 width: 200px; 23 height: 500px; 24 background-color: red; 25} 26.yellow { 27 width: 200px; 28 height: 100px; 29 background-color: yellow; 30 clear: both; 31} 32.container-2 { 33 width: 200px; 34 box-sizing: border-box; 35 float: left; 36} 37.blue { 38 width: 200px; 39 height: 200px; 40 background-color: blue; 41} 42.green { 43 width: 200px; 44 height: 400px; 45 background-color: green; 46} 47.container-3 { 48 width: 200px; 49 box-sizing: border-box; 50 float: left; 51 clear: both; 52 53} 54.black { 55 width: 200px; 56 height: 300px; 57 background-color: black; 58} 59.pink { 60 width: 200px; 61 height: 300px; 62 background-color: pink; 63} 64<\css>コード
質問は編集出来ますので、HTML・CSSの各コードは、それぞれ「コードブロック」にしてください。
回答1件
あなたの回答
tips
プレビュー