質問は編集出来ますので、HTML・CSSの各コードは、それぞれ「コードブロック」にしてください。
サイトから例題をとって練習中の独学者です。
３列目が横にどうしても並ばないのですが、どうしてでしょうか？
私の書いたコードは以下の通りです。
サイズをボーダーボックスにしてるので、中身が大きいということはないと思うし、フロートを解除してみたりもしたのですが、崩れてしまいます。
なんと説明したらいいか分からないので、コードをすべてコピーしてみました。
どうかよろしくお願いします。
HTML
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="main.css"> </head> <div class="wrapper clearfix"> <div class="container-1"> <div class="red"></div> <div class="yellow"></div> </div> <div class="container-2"> <div class="blue"></div> <div class="green"></div> </div> <div class="container-3"> <div class="black"></div> <div class="pink"></div> </div> </div> </html>コード
css
@charset "ute-8"; .clearfix::after { display: block; content: ""; clear: both; } .wrapper { width: 600px; height: 600px; box-sizing: border-box; } .container-1 { width: 200px; box-sizing: border-box; float: left; } .red { width: 200px; height: 500px; background-color: red; } .yellow { width: 200px; height: 100px; background-color: yellow; clear: both; } .container-2 { width: 200px; box-sizing: border-box; float: left; } .blue { width: 200px; height: 200px; background-color: blue; } .green { width: 200px; height: 400px; background-color: green; } .container-3 { width: 200px; box-sizing: border-box; float: left; clear: both; } .black { width: 200px; height: 300px; background-color: black; } .pink { width: 200px; height: 300px; background-color: pink; } <\css>コード
まだ回答がついていません
会員登録して回答してみよう
