CSS 플로트 이미지, 각 줄 여백 제거

Question

여러 개의 이미지 또는 DIV를 정렬하려고합니다. 나는 wordpress에서 내용을 얻는다.

#wrapper{  
width:800px; 
} 

.image{ 
width:125px; 
height:100px; 
float:left; 
margin-left:10px; 
} 

이렇게하면 마지막 이미지가 다음 줄로 이동합니다.

은 내가

#wrapper div:first-child{ 
    margin-left:0px; 
    } 

첫 번째 줄에 저를하는 데 도움이되지만 다음 라인이 다시 "파괴"하는

을 발견했다. 6 개의 이미지를^n Pictures 행으로 어떻게 정렬 할 수 있습니까?

Answer 1

이미지의 전체 너비와 같은 소리, 여백 및 여백은 너비가 너무 넓습니다. 이를 확인하려면 용기 너비를 늘려보십시오.

Answer 2

실제로 이것은 일반적인 디자인 문제입니다.

$("#wrapper .image:nth-child(6n+1)").find('img').css('margin-left','0'); 

이 jsfiddle here

를 참조하거나 당신이 단지 CSS 할 수 있지만,이는 실시간으로 작동합니다 : I는 컨테이너에 10px를 추가하여 문제를 해결하는 데 사용하지만, 요즘 난 항상 jQuery를 수정을 사용하여 브라우저

.image:nth-child(6n+1) { 
    margin-left:0px; 
} 

이 jsfiddle