初級・中級者向け~ウェブ制作備忘録
要素を横並びにする場合、一般的には「float」を使うのですが、表示したい場所(親ボックス内)の横幅に合わせてピッタリと横並びさせたい場合、要素にマージン(margin)があると、カラム落ちしてしまいます。
そんな時には『calc』の登場。CSS3から有効となった、サイズを計算式できっちり調整してくれる便利もの。%(パーセント)指定やpx(ピクセル)はもちろん、%とpxを混在させての計算式も無問題。
以下のコードは、子要素同士を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 |