具有填充图像问题的响应式网格答案

【问题标题】：Responsive Grid With Padding Image Issue具有填充图像问题的响应式网格
【发布时间】：2014-12-05 18:53:00
【问题描述】：

我有以下网格系统：

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
}

<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>

我的容器中的 3 列均等，但最后一张图片的高度大于其余部分。我知道这是因为第三列没有填充。

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

【问题讨论】：

如果您设法用小提琴或其他方式重现您的问题，那么回答起来会容易得多。
谢谢你，我在我编辑的问题中提供了一个链接:)
因为您的图像设置为区域的 100%，并且您没有添加任何填充，它会抓取您的 .last 容器的填充宽度，因此确实比其他容器更大。考虑它也提供一个填充或至少一个 padding-left 或 padding-right 来排列你想要的内容
编辑：我读多了，看到你已经添加了。而且因为你从你的项目中删除了 padding-right，所以它不会顺利..考虑做这样的事情：jsfiddle.net/tev60L6z/3
好的，那么您可以保留该容器的边距并给它overflow:hidden;，然后将另一个容器放入其中，边距为负数。

标签： html css responsive-design grid

【解决方案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

【讨论】：