今度は <div> を横に並べよう.これには,s1 クラスの幅を小さくし, float: left というスタイルを使用すると良い.これによって,s1 クラスの要素は左に寄り,右側の余白に次の要素を周りこますことができる.また,その次の s2 クラスは幅を小さくし,overflow: hidden; を指定すると良い.
<div>
s1
float: left
s2
overflow: hidden;
次のように,2つの要素が40%と60%の幅で横に配置されたことが確認できます.
1個目の要素
2個目の要素
前のページへ 次のページへ
目次に戻る