双列图像网格

我试图定位跨每行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

谢谢！

来源

2014-10-06 Mario Parra

这是你在找什么http://jsfiddle.net/webtiki/p80hrj4s/3/？ – 2014-10-06 13:03:38

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

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

例这里http://jsfiddle.net/p80hrj4s/1/

来源

2014-10-06 13:03:56

对于box-sizing，'-ms-'前缀从来没有存在过，'-webkit-'不需要，因为chrome 9和safari 5.'-moz-'既不是FF 28以来的版本，您可能会考虑不使用他们。（更多信息在这里：http://caniuse.com/#feat=css3-boxsizing） – 2014-10-06 13:09:27

谢谢，博扬 - 这非常有用！出于某种原因，正确的形象仍然没有完全漂浮在右边。如果我减少它的边际，它只是比左图像变得更大，所以我不知道如何解决这个问题：http://www.mtscollective.com/2014/03/gallery-wonder-years-real-friends- and.html – 2014-10-06 13:22:56

“后内容”部分的宽度似乎为624px而不是638px。我不知道该设置在哪里：/ – 2014-10-06 13:29:20

双列图像网格

回答

相关问题