CSS display:flex以外で横並びする方法

最近の横並べと言えばdisplay:flexですが、古いブラウザなどで使えないことがあります。

どうしても古いブラウザにも対応させないといけないときなどに使える、display:flex以外で横並びする方法を紹介します。

【大きな要素の横並び】float

<style>
.example{
    overflow: hidden;
    margin: 10px 0;
}
.example>div{
    border: 1px solid #999;
    padding: 15px;
    background: #faefcb;
    width: 50%;
    /*コレ*/float: left;
    box-sizing: border-box;
}
</style>
<div class="example">
    <div>左</div>
    <div>右</div>
</div>

比較的大きな要素を横並べするときはCSS float:leftを使って横並びしましょう。

floatは横幅を少し間違えると崩れてしまうので横幅の計算を丁寧に行いましょう。

「box-sizing:border-box」を使うとborderとpaddingを含んだwidthを指定でき崩れにくくなるためおススメです。

【画像やテキストなどの横並び】table

左

右

<table border="1">
    <tr>
        <td>左</td>
        <td>右</td>
    </tr>
</table>

画像やテキストなど比較的小さなものを横並べする場合、htmlのtable（表）を使ってしまうのが手っ取り早いです。

htmlだけで横並びできるため記事内で横並びしたいときなどに便利です。

【アイコンやボタンなどの横並び】inline-block

<style>
.example2{
    margin: 10px 0;
}
.example2>div{
    /*コレ*/display: inline-block;
    border: 1px solid #999;
    padding: 15px;
    width: 100px;
    background: #faefcb;
    margin: 0;
}
</style>
<div class="example2">
    <div>左</div><div>右</div>
</div>

「display:inline-block」を指定すると横並べができるようになります。

ただし、floatが上揃えだったのに対し「display:inline-block」は下揃えになります。アイコンやボタンなど高さが同じ要素を並べるときにおすすめです。

【まとめ】flex以外で横並び

• 大きな要素の横並び
  float:left
• 画像やテキストなどの横並び
  table
• アイコンやボタンなどの横並び
  display:inline-block

以上、CSS display:flex以外で横並びする方法でした。