CSS ブロック要素を横に並べる
CSSをまとめる機会がありませんでしたので、少しずつまとめていこうと考えています。
今回の目当ては、「インライン要素をブロック要素として扱い、そのブロック要素を横に並べる」です。
◆インライン要素とブロック要素
▼インライン要素
テキスト、imgタグなど
インライン要素は、左から右へと並びます。
▼ブロック要素
divタグ、pタグ、h3タグなど
ブロック要素は、上から下へと並びます。
◆インライン要素の整列・改行による空白表示
HTMLのソースファイルで、インライン要素の中に改行を入ると、余分な空白が表示されます。一方、ブロック要素の中に改行を入れても、余分な空白は表示されません。そのため、インライン要素をブロック要素として扱いたい場合があります。
◆インライン要素をブロック要素として扱い、左から右へ並べる
▼HTMLファイル
<div id="test">
<img src="img-test1.png" />
<img src="img-test2.png" />
</div>
▼CSSファイル
/* 外側のブロック */
#test {
overflow:hidden;
}
/* 内側の画像 */
#test img {
display: block;
float:left;
}
▼displayプロパティとは
ブロック要素、インライン要素のそれぞれの表示形式(ブロック・インライン)を指定します。
表示形式を指定することにより、インライン要素をブロック要素として扱うことができます。
▼floatプロパティとは
指定された要素を左または右に寄せて配置します。 その要素の後に続く内容は、その反対側に回り込みます。
▼overflowプロパティとは
ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定します。
overflowプロパティでvisible以外を指定すると、新しいブロックのコンテキストが確立され、floatを解除するために使えるそうです。(参考:floatを解除する手法のclearfix と 次世代のレイアウトの話|Web Design KOJIKA17)
clearプロパティ(※)を使う方法もあります。
※clearプロパティとは
floatプロパティで指定された要素に対する回り込みを解除します。
<使用例>
.clear {
clear:both; /* 左寄せまたは右寄せされた全ての要素に対する回り込みを解除 */
}
参照
floatを解除する手法のclearfix と 次世代のレイアウトの話|Web Design KOJIKA17