要素を横並びにする方法はいくつかありますが、ここではfloatプロパティを使用する方法について見てみましょう。
floatプロパティは要素を横に寄せることができるプロパティです。
floatを直訳すると「浮く」です。
要素を、浮いたように寄せることができます。
もちろんドローンのように要素が空中に浮くわけではありませんが、感覚として浮いたように寄せることができます。
下の図を見てください。
yellow要素とyellowgreen要素、blue要素を並べました。
htmlソース
<!--===参考===-->
<body>
<div id="container">
<div class="yellow">
</div>
<div class="yellowgreen">
</div>
<div class="blue">
</div>
</div><!--container-->
</body>
cssソース
/*===参考===*/
.yellow {
width: 20%;
height: 100px;n;
background: yellow;
}
.yellowgreen {
width: 25%;
height: 120px;
background: yellowgreen;
}
.blue {
width: 50%;
height: 150px;n;
background: blue;
}
floatの動き方
yellow要素にfloat: left;を設定すると、floatによりyellow要素が浮いたためyellowgreen要素がyellow要素の下に潜り込みました。
cssソース
/*===参考===*/
.yellow {
width: 20%;
height: 100px;n;
background: yellow;
float: left; /*追記*/
}
次に、yellowgreen要素にもfloat: leftを設定してみます。
そうするとyellowgreen要素が浮いて右へ回り込み、blue要素が下に潜り込みました。
cssソース
/*===参考===*/
.yellowgreen {
width: 25%;
height: 120px;
background: yellowgreen;
float: left; /*追記*/
}
横並び
blue要素もfloat: leftを設定すると右へ回り込み、要素が横並びになります。
この様にfloat. leftで右へ回り込み、横並びのレイアウトを作ることができます。
float: rightでは左へ回り込むことになります。
回り込みが終了したら回り込みを解除しておきましょう。
htmlソース
<!--===参考===-->
<body>
<div id="container">
<div class="yellow">
</div>
<div class="yellowgreen">
</div>
<div class="blue">
</div>
<div class="clear"><hr /></div>
</div><!--container-->
</body>
回り込み解除
回り込みが終了したら、回り込みを解除します。
例えば、blue要素が下に潜らないようにするには、yellowgreen要素の後、blue要素の前で回り込みを解除します。
htmlソース
<!--===参考===-->
<body>
<div id="container">
<div class="yellow">
</div>
<div class="yellowgreen">
</div>
<div class="clear"><hr /></div> <!--回り込み解除-->
<div class="blue">
</div>
</div><!--container-->
</body>
回り込み解除スタイルソース
cssソース
/*===回り込み解除===*/
.clear {
clear: both;
}
.clear hr {
display: none;
}
回り込み解除htmlソースと、回り込み解除スタイルソースはセットで使います。