横幅いっぱい（ピッタリ）に要素を並べるCSS（もちろんレスポンシブで…）

要素を横並びにする場合、一般的には「float」を使うのですが、表示したい場所（親ボックス内）の横幅に合わせてピッタリと横並びさせたい場合、要素にマージン（margin）があると、カラム落ちしてしまいます。

そんな時には『calc』の登場。CSS3から有効となった、サイズを計算式できっちり調整してくれる便利もの。%（パーセント）指定やpx（ピクセル）はもちろん、%とpxを混在させての計算式も無問題。

• 要素にmarginがある場合、親要素のwidthにネガティブマージンで子要素のマージン分を指定します。
• 子要素をfloatさせてcalcで並べたいカラム数で割り算し、さらにマージン×2を減算。
• 子要素のwidthは%指定になるため、親要素の幅に連動して自動的に調整されますので、レスポンシブデザインにおいても有効です。

以下のコードは、子要素同士を10pxの間隔で3個並びにする例です。

<style>
div.itemWrapper{
margin:0 -5px;
/*display:block;*/
/*overflow:hidden;*/
}
div.itemWrapper a{
float:left;
margin:5px;
width:calc(100% / 3 - 10px);
background-color:#ccc;
}
</style>

<div class="itemWrapper">
<a href="#1">item_1</a>
<a href="#2">item_2</a>
<a href="#3">item_3</a>
<a href="#4">item_4</a>
<a href="#5">item_5</a>
</div>

子要素は「float」してますので、子要素の最後に『clear:both;』などで回り込みを解除してもいいですが、親要素に

display:block;
overflow:hidden;

を追加しておいたほうがスマートですね。

	HTML＆CSS
	2019.07.06 07:03
	2019.07.12 07:05

Related entry

Pickup entry

• BACK
• NEXT