html - 两列图像网格

Question

我正在尝试将两张图片放置在每一行上，但由于每张图片都有一些填充和边框，所以每张图片的 50% 似乎太多了。我还有另一类图像跨度为 100%，但它们似乎比两个较小的图像跨度更大。基本上，我想对两个图像进行样式设置以与更宽的图像对齐:http://jsfiddle.net/p80hrj4s/ .

<div class="post-content"><a href="https://lh5.googleusercontent.com/-rr2z22v0QgY/VDKGa9ovtnI/AAAAAAAAWbY/CXRKfU6WPcU/s1024/01-kp.jpg"><img class="left-half" src="https://lh5.googleusercontent.com/-rr2z22v0QgY/VDKGa9ovtnI/AAAAAAAAWbY/CXRKfU6WPcU/s1024/01-kp.jpg"></a><a href="https://lh5.googleusercontent.com/-rr2z22v0QgY/VDKGa9ovtnI/AAAAAAAAWbY/CXRKfU6WPcU/s1024/01-kp.jpg"><img class="right-half" src="https://lh5.googleusercontent.com/-rr2z22v0QgY/VDKGa9ovtnI/AAAAAAAAWbY/CXRKfU6WPcU/s1024/01-kp.jpg"></a>

<div class="fullwidth"><a href="https://lh5.googleusercontent.com/-rr2z22v0QgY/VDKGa9ovtnI/AAAAAAAAWbY/CXRKfU6WPcU/s1024/01-kp.jpg"><img class="fullwidth" src="https://lh5.googleusercontent.com/-rr2z22v0QgY/VDKGa9ovtnI/AAAAAAAAWbY/CXRKfU6WPcU/s1024/01-kp.jpg"></a></div>
</div>

我不确定该怎么做，因为我尝试过的看起来不对。

编辑:部分问题是 right-half 图像没有完全 float 到右边——我似乎只能用 margin 将它推到底-右:-7px；。我也在这测试它:http://www.mtscollective.com/2014/03/gallery-wonder-years-real-friends-and.html#.VDKTeCmSz-0

谢谢!

Answer 1

您需要使用 box-sizing: border-box，然后您可以为元素添加 padding 和 border，它会在该元素内部计算它们，因此它不会将 padding 和 border 添加到宽度 :)

* {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box
}

此处示例 http://jsfiddle.net/p80hrj4s/1/