Googleでログイン
Twitterでログイン
問題
floatを使ってみよう！
floatを上手く使いましょう。
見本を参考にして実装してください。
floatを上手く使いましょう。
見本を参考にして実装してください。
自分の環境に書くコード
<section>
<div class="box box--red"></div>
<div class="box box--blue"></div>
<div class="box box--green"></div>
</section>
<section>
<div class="box box--red"></div>
<div class="box box--blue"></div>
<div class="box box--green"></div>
</section>
¥HTML¥
section {
width: 1000px;
margin-bottom: 30px;
}
.box {
width: 200px;
}
.box--red {
height: 100px;
background-color: red;
}
.box--blue {
height: 200px;
background-color: blue;
}
.box--green {
height: 300px;
background-color: green;
}
¥CSS¥
期待する画面
解答ソースコード
<section>
<div class="box box--red"></div>
<div class="box box--blue"></div>
<div class="box box--green"></div>
</section>
<section>
<div class="box box--red"></div>
<div class="box box--blue"></div>
<div class="box box--green"></div>
</section>
¥HTML¥
section {
width: 1000px;
margin-bottom: 30px;
overflow: hidden;
}
section + section > .box.box--green {
float: right;
}
.box {
width: 200px;
float: left;
}
.box--red {
height: 100px;
background-color: red;
}
.box--blue {
height: 200px;
background-color: blue;
}
.box--green {
height: 300px;
background-color: green;
}
¥CSS¥
1.HTMLの宣言をしてみよう
有料コース一覧
甲賀KOGA
解説
要素が浮いた状態(position:absoluteの様な状態)になってしまうので
親要素にoverflow: hidden;をかけてあげて浮遊を解除する必要があります。
ちなみに2段目の緑の要素にのみfloat: right;をかけております。
clear: both;などを使って解除するやり方などfloatにはtips(小技)が多いですが、あまり使用する機会がないので親要素にoverflow: hidden;と覚えておけばいいでしょう。