モーダル表示などで、親要素の幅によって、子要素の位置を縦並び・横並びにしたい時があると思います。
今回はそdisplayのblockとinline-blockを用いた方法をご紹介します。
displayのblockとinline-block
blockとinline-blockの違い
親要素によって子要素の位置を変えたいときはdisplayのblockとinline-blockを使います。
ざっくりですが、displayのblockとinline-blockの違いです。
| block | inline-block | |
| 並び | 縦並び | 横並び |
| 幅 | 親要素の幅と同じ幅まで広がる | テキストの幅まで広がる |
blockとinline-blockの並び方
親要素の幅を2パターンにして、blockとinline-blockの違いがわかるコードを下記に添付します。
blockの場合は親要素の大きさにかかわらず、縦並びで幅もいっぱいまで広がっています。
inline-blockの場合は親要素が小さいときは縦並び、大きい時は横並びになっており、
幅は自身のテキスト幅と同じです。
See the Pen
Untitled by Shungo Matsumura (@shungo0525)
on CodePen.
コメント