[CSS]水平に配置するパネルをスマートに実装するスタイルシート

等間隔にパネルを水平に配置した際、余分なマージンのせいで列から落ちてしまうのをスマートな実装方法で解決するスタイルシートをwoork upから紹介します。

How to distribute elements horizontally using CSS

問題点

3つのdiv要素にそれぞれマージンを付与して等間隔に配置した際、3つのdivとマージンの領域がwrapperの領域を超えてしまうと、ブラウザのレンダリングは一列ではなく二列になってしまいます。
これをdiv要素に異なるclass名を使用せずに、一列に配置します。

HTML

HTMLは下記のようにベーシックなものとなっています。

解決方法

まず、ポイントとなるのは、div要素の右側にとっていたマージンを左側に変更します。

CSS

wrapperのスタイルシートです。

CSS

内包されている3つのdiv要素にはマージンをleftに指定します。

左端の一番最初のdiv要素に余分なマージンが生じるので、「first-child」を使用して削除します。

CSS

「first-child」を使用して、左端の一番最初のdiv要素だけマージンを「0px」にします。