Question

我试图在每行上放置两个跨越100％的图像，但是，因为每个图像都有一些填充和边框，所以每个图像看起来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图片没有完全浮动到右边 - 我似乎只能用margin-right: -7px;一直推动它。我也在这里测试它：http://www.mtscollective.com/2014/03/gallery-wonder-years-real-friends-and.html#.VDKTeCmSz-0

谢谢！

Answer 1

你需要使用box-sizing：border-box，然后你可以为元素添加填充和边框，它将在该元素内计算它们，所以它不会将填充和边框添加到宽度:) / p>

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

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

双列图像网格

1 个答案: