IE9からの確認の今table-cellをつかなければもったいないので確認する。

3カラムレイアウト

3カラムのレイアウトって仕事であんまり個人的に使わないけど。
ポータルサイトみたいに情報が多ければ使うかと思う。

【html】

<ul>
  <li>
    <div class="inner bg01">column01</div>
  </li>
  <li>
    <div class="inner bg02">column02</div>
  </li>
  <li>
    <div class="inner bg03">column03</div>
  </li>
</ul>

【css】

.bg01{
  background: blue;
}
.bg02{
  background: green;
}
.bg03{
  background: red;
}

ul {
  /*tableにする*/
  display: table;
  width: 100%;
  margin: 5% 0;
  li {
    display: table-cell;
    text-align: center;
    .inner {
     padding: 5% 0;      
    }
  }
}

demo

See the Pen ZQoXXV by ziyudom (@ziyudom) on CodePen.

カラム間の隙間をあける(両サイドはなし)

カラム間の隙間を空けたいときに
・border-collapse
・border-spacing
で調整が出来る。

  /*隙間あける*/
  border-collapse: separate;
  /*まさかの左右 上下*/
  border-spacing: 20px 0;

ただこれだと一番両サイドもすきまが出来てしまいます。

【demo】

See the Pen adGLKo by ziyudom (@ziyudom) on CodePen.

これどうやって両サイドの隙間けすの？

解決策？

果たしてコレが解決策なのか不明ですが、
さきほどのborder-collapseを消して、liにpaddingを追加。
そのままだとやはり両サイドに隙間ができますので、そこから:first-child :last_childを使ってpaddingを打ち消します。

See the Pen jWxGpv by ziyudom (@ziyudom) on CodePen.

これが果たして解決策なのか。わからないけど。とりあえず欲しいものになりましたので今日はここまで。