CSSによるDIV（ブロック）要素の横並び方法4種類

デモはこちら

1.floatによる横並び

注意点

• 親要素 :after に 「content」「display」「clear」要素を追加する。
• または親要素に clearfix を指定する

css

.div_float:after {
  content:'';
  display:table;
  clear:both;
}
.div_float .cell {
  border: 1px solid black;
  float: left;
}
</style>

html

<div class="div_float">
<div class="cell">aaa</div>
<div class="cell">bbb<br>bbb</div>
<div class="cell">ccc</div>
</div>

実際の表示

2.display: inline-blockによる横並び

「display: inline-block」は幅や高さなどを指定できるインライン要素です。

注意点

• 親要素に font-size: 0; を指定してブロック間の隙間をなくす
• 子要素に font-size: 12pt; を指定してフォントの大きさを指定する

css

  .div_inline_block{
    font-size: 0;
  }
  .div_inline_block .cell {
    font-size: 12pt;
    border: 1px solid green;
    display: inline-block;
  }

html

<div class="div_inline_block">
  <div class="cell">aaa</div>
  <div class="cell">bbb<br>bbb</div>
  <div class="cell">ccc</div>
</div>

実際の表示

3.「display:table;」「display:table-cell;」による横並び

注意点

• 親要素に display:table; を指定（実はなくてもOK。）
• 子要素に display:table-cell; を指定

css

  .div_table{
    display:table;
  }
  .div_table .cell {
    display: table-cell;
    border : 1px solid red;
  }

html

<div class="div_table">
  <div class="cell">aaa</div>
  <div class="cell">bbb<br>bbb</div>
  <div class="cell">ccc</div>
</div>

実際の表示

3.4.「display:flex;」による横並び

注意点

• 親要素に「display: flex;」を設定
• 子要素は自動的にflexアイテムになる
• 古いブラウザ用にベンダープレフィックスが必要

css

    .div_flex{
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
    }
    .div_flex .cell {
      border : 1px solid purple;
    }

html

  <div class="div_flex">
    <div class="cell">aaa</div>
    <div class="cell">bbb<br>bbb</div>
    <div class="cell">ccc</div>
  </div>

実際の表示

<div class="cell">aaa</div>
<div class="cell">bbb<br>bbb</div>
<div class="cell">ccc</div>

参考 : http://flexboxin5.com 参考 : http://bit.ly/1VT62NP
参考 : http://bit.ly/1obD69i