我有以下网格系统:
http://jsfiddle.net/tev60L6z/1
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的间隙。 最佳答案
我建议在最后一项上保留空白,并在容器上使用负的右边距:
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
关于html - 带有填充图像问题的响应网格,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27312870/