雙列圖像網格

我試圖定位跨每行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

雙列圖像網格

回答

相關問題