响应网格与填充图像问题

Question

我有以下网格系统：

http://jsfiddle.net/tev60L6z/1

＆＃13;

＆＃13;

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
img {
  height: auto;
  max-width: 100%;
}
.container {
  width: 100%;
}
.third {
  float: left;
  width: 33.334%;
  padding-right: 24px;
}
.last {
  padding-right: 0;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both
}

＆＃13;

<div class="container clearfix">
  <article class="third">
    <img src="http://3.bp.blogspot.com/-6Q23mHrTwxc/UxGT360FBMI/AAAAAAAAAJ0/pj86RO2vGyg/s320/google-maps-api.jpg" alt="image" />
    <h1>Title</h1>
    <p>Description</p>
  </article>
  <article class="third">
    <img src="http://3.bp.blogspot.com/-6Q23mHrTwxc/UxGT360FBMI/AAAAAAAAAJ0/pj86RO2vGyg/s320/google-maps-api.jpg" />
    <h1>Title</h1>
    <p>Description</p>
  </article>
  <article class="third last">
    <img src="http://3.bp.blogspot.com/-6Q23mHrTwxc/UxGT360FBMI/AAAAAAAAAJ0/pj86RO2vGyg/s320/google-maps-api.jpg" alt="image" />
    <h1>Title</h1>
    <p>Description</p>
  </article>
</div>

＆＃13;

＆＃13;

＆＃13;

3列同样位于我的容器中，但最后一张图像的高度大于其余图像。我理解这种情况正在发生，因为第三列没有填充。

是否有解决方案来均衡图像高度，同时保持3个相等的宽度？我在图片上尝试max-width，但这会在第三列的右边增加24px的间隙。

Answer 1

我建议将填充物留在最后一个项目上并在容器上使用负右边距：

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
img {
  height: auto;
  max-width: 100%;
}
.container {
  width: 100%;
  overflow: hidden;
}
.wrap {
  margin-right: -24px;
}
.third {
  float: left;
  width: 33.334%;
  padding-right: 24px;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both
}

<div class="container clearfix">
  <div class="wrap">
    <article class="third">
      <img src="http://3.bp.blogspot.com/-6Q23mHrTwxc/UxGT360FBMI/AAAAAAAAAJ0/pj86RO2vGyg/s320/google-maps-api.jpg" alt="image" />
      <h1>Title</h1>

      <p>Description</p>
    </article>
    <article class="third">
      <img src="http://3.bp.blogspot.com/-6Q23mHrTwxc/UxGT360FBMI/AAAAAAAAAJ0/pj86RO2vGyg/s320/google-maps-api.jpg" />
      <h1>Title</h1>

      <p>Description</p>
    </article>
    <article class="third last">
      <img src="http://3.bp.blogspot.com/-6Q23mHrTwxc/UxGT360FBMI/AAAAAAAAAJ0/pj86RO2vGyg/s320/google-maps-api.jpg" alt="image" />
      <h1>Title</h1>

      <p>Description</p>
    </article>
  </div>
</div>

参考：grid with inner padding only