ボックスの配置する方法③ | ーーーーーー

こんにちは。

 

 

ボックスの配置する方法の続編です。

完成図

このように制作します。

 

前回の「ボックスの配置する方法②」の課題から、緑の四角が右寄せになったバージョンです。

 

と言うことは、floatを使用します。

 

右寄せをするCSSは?

 

float:right;と書きます。

 

こちらを緑の四角に適応させます!

css

htmlのコーディングは「ボックスの配置する方法②」と同じなので省略いたします。

 

結果はこちら

 

画面サイズを広げた時に良くわかりますね!!画面の右端になりました。

 

 

次のブログで、この中に何度も登場してきた、floatについてよく調べて見ましょう!