벽돌/모자이크 스타일 이미지 그리드 - 크기, 스페이싱 문제

Question

내 홈페이지에 공백을주는 벽돌/모자이크 스타일 이미지 격자가 있습니다. 이상적으로는 모든 이미지 사이에 10 픽셀의 간격이 있어야합니다 (단, div의 가장자리와 동일해야 함). 대부분의 경우, 나는 이것이 정확하게 설정되어 있다고 믿지만, 공간 사이는 꺼져 있고 이미지의 맨 아래 줄은 오른쪽으로 잘 이동합니다. 이걸 해결하기 위해 나는 무엇을 놓쳤는가?

jsfiddle

추가 구문 코드를 강조

<nav> 
     <div> 
      <a href="#"><img src="http://placehold.it/465x149"></a> 
      <a href="#"><img src="http://placehold.it/465x149"></a> 
     </div> 
     <div> 
      <a href="#"><img src="http://placehold.it/165x309"></a> 
      <a href="#"><img src="http://placehold.it/288x309"></a> 
      <a href="#"><img src="http://placehold.it/465x309"></a> 
      <a href="#"><img src="http://placehold.it/465x309"></a> 
     </div> 
    </nav><!-- end nav --> 

nav { 
    width: 940px; 
} 
nav a { 
    float: left; 
    background-color: gray; 
} 
nav div:nth-child(1) { 
    float: left; 
    width: 465px; 
} 
nav div:nth-child(1) a:nth-child(1) { 
    width: 465px; 
    height: 149px; 
    margin: 0 5px 10px 0; 
} 
nav div:nth-child(1) a:nth-child(2) { 
    width: 465px; 
    height: 149px; 
    margin: 0 5px 5px 0; 
} 
nav div:nth-child(2) a:nth-child(1) { 
    width: 165px; 
    height: 309px; 
    margin: 0 5px 0 5px; 
} 
nav div:nth-child(2) a:nth-child(2) { 
    width: 288px; 
    height: 309px; 
} 
nav div:nth-child(2) a:nth-child(3) { 
    width: 465px; 
    height: 309px; 
    margin: 5px 5px 0 0; 
} 
nav div:nth-child(2) a:nth-child(4) { 
    width: 465px; 
    height: 309px; 
    margin: 5px 5px 0 0; 
} 

Answer 1

잘 모르겠어요 당신이 여기에 대한려고하면 (어떻게이 탐색?입니다) 나는 생각하지 않는다 나는이 방법으로 코드를 구조화했을 것이다. 하지만 열의 너비 (div)는 포함 된 객체에 여백을 포함해야한다는 점을 명심해야합니다. 또한, 당신은 귀하의 네비게이션 div : CSS에서 nth - 자식 (2) 열 정의가 누락되었습니다.

내가이 라인

<div class="container"> 
     <div class="col"> 
      <a href="#" class="wide short"><img src="http://placehold.it/465x149"></a> 
      <a href="#" class="wide short"><img src="http://placehold.it/465x149"></a> 
     </div> 
     <div class="col"> 
      <a href="#" class="narrow tall"><img src="http://placehold.it/165x309"></a> 
      <a href="#" class="med tall"><img src="http://placehold.it/288x309"></a> 
      <a href="#" class="wide tall"><img src="http://placehold.it/465x309"></a> 
      <a href="#" class="wide tall"><img src="http://placehold.it/465x309"></a> 
     </div> 
</div> 

.container { 
    width: 960px; 
} 
a { 
    float: left; 
} 
.col { 
    float: left; 
    width: 475px; 
    margin-right: 5px; 
} 
.col .wide { 
    width: 465px; 
    margin: 0 0 10px 0; 
} 
.col .narrow { 
    width: 165px; 
    height: 309px; 
    margin: 0 10px 10px 0; 
} 
.col .med { 
    width: 288px; 
    height: 309px; 
    margin: 0 0 10px 0; 

} 

.col .short { 
    height: 149px; 
} 
.col .tall { 
    height: 309px; 
} 

(http://jsfiddle.net/gkQbC/) 나는 '돈을 따라 무언가를보고 선호하는 것

nav { 
    width: 945px; 
} 
nav a { 
    float: left; 
    background-color: gray; 
} 
nav div:nth-child(1) { 
    float: left; 
    width: 470px; 
    margin-right: 5px; 
} 
nav div:nth-child(1) a:nth-child(1) { 
    width: 465px; 
    height: 149px; 
    margin: 0 0 10px 0; 
} 
nav div:nth-child(1) a:nth-child(2) { 
    width: 465px; 
    height: 149px; 
    margin: 0 5px 5px 0; 
} 
nav div:nth-child(2) { 
    width: 470px; 
    float:left; 
} 
nav div:nth-child(2) a:nth-child(1) { 
    width: 165px; 
    height: 309px; 
    margin: 0 10px 0 0; 
} 
nav div:nth-child(2) a:nth-child(2) { 
    width: 288px; 
    height: 309px; 
} 
nav div:nth-child(2) a:nth-child(3) { 
    width: 465px; 
    height: 309px; 
    margin: 10px 0 0 0; 
} 
nav div:nth-child(2) a:nth-child(4) { 
    width: 465px; 
    height: 309px; 
    margin: 10px 0 0 0; 
} 

(http://jsfiddle.net/HytkQ/를) 이 작동하지만, 나는 그것을 사랑하지 않아 높이가 실제로 필요하다고 생각하지만 나는 그들을 던져 넣었다.

아래에 큰 이미지가 나타나게하려면 (옵션 1 o 아래 F 내 댓글)

<div class="container"> 
    <div class="col"> 
     <a href="#" class="wide short"><img src="http://placehold.it/465x149"></a> 
     <a href="#" class="wide short"><img src="http://placehold.it/465x149"></a> 
     <a href="#" class="wide tall"><img src="http://placehold.it/465x309"></a> 
    </div> 
    <div class="col"> 
     <a href="#" class="narrow tall"><img src="http://placehold.it/165x309"></a> 
     <a href="#" class="med tall"><img src="http://placehold.it/288x309"></a> 
     <a href="#" class="wide tall"><img src="http://placehold.it/465x309"></a> 
    </div> 
</div> 

(http://jsfiddle.net/VCfXD/)