CSSで要素を均等横並びにする際、2つ並べたい場合は「width: 50%」と指定します。しかし、これだと2つ目の要素が次の行へ行ってしまい、2つ横並びにならないことがあります。
widthの合計値を100%ではなく99%にするとうまくいく場合は、ここで説明している方法で改善する可能性が高いです。
その原因を紹介します。
目次
原因
原因は、要素と要素の間に、改行やスペースが入っているからです。
そのスペースの分も幅を取るので、最後の要素が同じ行に入りきらず、はみ出るということです。
直すには、改行やスペースを取り除いてみてください。うまくいくはずです。
つまり、次の書き方は間違いで、
<div id="col1">content</div> <div id="col2">content</div>
次の書き方が正解です。
<div id="col1">content</div><div id="col2">content</div>
均等幅で横並びにする方法
要素を均等幅で横並びにしたい場合は、要素のstyleに
- display:inline-block を指定して、
- widthを指定します。
inline-blockが指定されていない場合には、widthが効かないですので注意してください。
widthには、n個の要素を並べる際には、次の値を指定します。
2個 width: 50%
3個 width: 33.3333%
4個 width: 25%
5個 width: 20%
6個 width: 16.6667%
7個 width: 14.2857%
8個 width: 12.5%
9個 width: 11.1111%
10個 width: 10%
11個 width: 9.0909%
12個 width: 8.3333%
まとめ
うまくいきましたでしょうか。参考になりましたら幸いです。
