2 열 이미지 격자

각 행에 100 %에 걸쳐있는 두 개의 이미지를 배치하려고합니다. 그러나 각 이미지에 여백과 테두리가 있기 때문에 각각에 대해 50 %가 너무 많이 나타납니다. 나는 또한 100 %에 이르는 이미지를위한 또 다른 클래스를 가지고 있지만, 두 개의 작은 클래스보다 더 확장되어있는 것처럼 보입니다. 기본적으로 두 이미지를 더 넓은 이미지에 맞춰 스타일을 지정하고 싶습니다. http://jsfiddle.net/p80hrj4s/.2 열 이미지 격자

<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/ 무엇을 찾고 있습니까? –

상자 크기 조정 : 테두리 상자를 사용해야하며 요소에 패딩과 테두리를 추가 할 수 있으며 해당 요소 내에서 요소를 계산하므로 너비에 채우기 및 테두리가 추가되지 않습니다.

* { 
    -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

상자 크기에 대해서, '-ms-'접두사는 존재하지 않았고, 크롬 9와 사파리 5는 FF 28이 아니기 때문에'-moz-'가 없기 때문에'-webkit-'이 필요하지 않습니다. 그들. (자세한 내용은 여기 : http://caniuse.com/#feat=css3-boxsizing) –

고마워요, 보얀 - 그게 아주 유용합니다! 어떤 이유로 든 오른쪽 이미지가 여전히 오른쪽으로 완전히 부양되지 않습니다. 마진을 줄이면 왼쪽 이미지보다 커지기 때문에 어떻게 수정해야할지 모르겠다. http://www.mtscollective.com/2014/03/gallery-wonder-years-real-friends- and.html –

'post-content' 섹션의 너비가 638px 대신 624px 인 것으로 보입니다. 그게 어디에 설정되어 있는지 모르겠다 :/ –

2 열 이미지 격자

답변

관련 문제