さぁ!検索しよう!

CSSのみでリキッドレイアウト時にmargin有りの横並び要素が親要素からはみ出ることなく、常に両端ぴったりと配置されるようにする方法です。

DEMO

HTML

<ul class="clearfix">
  <li>
    <aside>
      <img src="http://tsukulog.net/wp-content/uploads/2015/04/2-min.jpg">
    </aside>
  </li>
  <li>
    <aside>
      <img src="http://tsukulog.net/wp-content/uploads/2015/04/2-min.jpg">
    </aside>
  </li>
  <li>
    <aside>
      <img src="http://tsukulog.net/wp-content/uploads/2015/04/2-min.jpg">
    </aside>
  </li>
</ul>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

ul {
  list-style: none;
  margin: 0 0 0 -2%;
  padding: 0;
}

li {
  float: left;
  margin-left: 2%;
  width: -webkit-calc(100% / 3 - 2%);
  width: calc(100% / 3 - 2%);
}

aside {
  background: #eee;
}
aside img {
  display: block;
  height: auto;
  max-width: 100%;
}

CSSのポイントは以下の通りです。

左側にネガティブマージンを加える

limarginによってカラム落ちしないようにulの左側にlimargin分であるmargin:-2%;を加えています。

ul {
  margin: 0 0 0 -2%;
}

※左側からではなく、右側から-2%marginを加えてしまうと、横スクロールバーが出現してしまいます。

横並びにする要素の横幅を算出

limargin-left:2%;を指定後、calc()で親要素の幅をカラム数で割った値100% / 3から、自身のmargin2%を引いた値をwidthとしています。

li {
  margin-left: 2%;
  width: calc(100% / 3 - 2%);
}

以上で、CSSのみでリキッドレイアウト時に、margin有りの横並び要素が親要素からはみ出ることなく、常に両端ぴったりと配置されるようにする方法を終わります。