話題の人物YouTubeまとめ&雑記雑感雑多ログ

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

表示したい場所(親ボックス内)の横幅に合わせて要素をピッタリと横並びさせたい場合、floatを使うのですが、並べる要素幅の値計算が必要だったり、特に要素同士にマージン(margin)があると、カラム落ちしてしまいます。

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

親要素幅にピッタリ収めるCSSの基本は、子要素にmarginがある場合、親要素のwidthにネガティブマージンで子要素のマージン分を指定します。

そして、子要素をfloatさせてcalcで並べたいカラム数で割り算し、さらにマージン×2を減算。

子要素のwidthは%指定になるため、親要素の幅に連動して自動的に調整されますのでレスポンシブデザインにおいても有効です。

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

CSS

<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>

HTML

<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;

を追加しておいたほうがスマートかもしれません。

関連記事

CSSで文字列を省略して文末に『…』を付ける。さらにテーブル(セル)にも適用させる方法 2018.05.01 Youtube(iframe)をレスポンシブ対応で掲載する 2018.05.01

雑記雑感雑多ログ

タイ・シルバーの新芽2本目を確認 2018.05.12 画像遅延スクリプト「echo.js」でページ表示の体感速度を上げる。 2018.05.11 格闘技イベント「RIZIN」での衝撃KOシーン!堀口恭司vsイアン・マッコール 2018.05.09 広告収入で賄う無料タクシー「nommoc/ノモック」とは!? 2018.05.08 これって…そのためのTシャツ!?ポケットティッシュをスマートに出せるアイデアTシャツ 2018.05.07 ゴールデンウィーク明けの仮想通貨動向 2018.05.07 プロレスの登場シーンをかっこ良く決めるつもりが、張り切り過ぎてしまった結果・・・ズッコケ名シーン。 2018.05.05 新サイト「CCindex/仮想通貨・暗号通貨まとめ」リリース! 2018.05.04 指定ディレクトリ(フォルダ)内の画像ファイルを抽出してランダム(重複なし)に表示させる最短コード 2018.05.01 最低覚えておきたいチャートの見方 2018.05.01

PR

【CCindex】仮想通貨・暗号通貨まとめ