floatに頼らない！inline-blockでblock要素を横並びにできる！

こんにちは、スウェルデザインのWです。

今まで要素を横並びにする時は、floatを活用していたのですが

floatっていうのは厄介なヤツで、使用した後はclear: both;でfloatを食い止めないと

後の要素に影響してしまいます。

そもそもの用途は、画像にtextを回りこませる為に浮かせる役割を持っていて

block要素を横並びにするスタイルではありませんでした。

floatを使った例がこちら

See the Pen OyJaWm by swelldesign (@w-swelldesign) on CodePen.

なので、本来と違った使い方をすると色々な弊害が出てきてしまいます。

この場合も左寄せが綺麗に揃ってません。

そこで代わりになるスタイルを今更発見してしまいました。

あったんですねこんな便利なスタイルが・・

それが『inline-block』

このスタイルはブロック要素をinlineとして扱ってくれるので

See the Pen NGWEdw by swelldesign (@w-swelldesign) on CodePen.

こんな感じ、左のラインも揃ってます。

ブラウザの幅に合わせて横並びにしてくれるのでレイアウトが崩れにくく

更にdivとしての良い所は残るという優秀なスタイルでした。

今後は活躍させていきたいと思います。