벽돌에 여백이있을 때 jQuery 벽돌이 내부 컨테이너에 들어갑니다.

Question

저는 940 픽셀의 폭을 가지고 있습니다. #container에는 4 개의 240px 벽돌이 jQuery 벽돌로되어 있습니다. 그런 다음 벽돌의 왼쪽과 오른쪽에 10px 패딩을 사용하여 벽돌을 220px 넓게 만듭니다. 여기

은 예입니다 : http://jsfiddle.net/xECcm/

그러나 만약 당신이 나는 경우, 벽돌은 너무 가까이있다, 그래서 그것을 만회하기 위해 벽돌의 폭을 .item 벽돌에 여백 오른쪽을 추가 감소 . 그러나 오른쪽 대부분의 벽돌은 그것에 5px의 여백 오른쪽이 있으므로 전체 960 픽셀 컨테이너를 구성하지 않는 벽돌, 참조 :

http://jsfiddle.net/xECcm/2/

을 나는

.item:last-child{ 
    margin-right:0; 
} 

를 추가 시도

하지만 그 중 하나가 작동하지 않았다, 참조 : http://jsfiddle.net/xECcm/3/

을 그러니까 기본적으로, 나는이 항목을 가지고 더 마진 오른쪽, 또는 방법이 없습니다 내가 항목의 마지막 열을 어떻게 부탁 해요/벽돌 채우기 전체 960 픽셀 컨테이너까지

도움 주셔서 감사합니다. 나는 아마도이 질문을 끔찍한 것으로 생각 했으므로 질문이 있으면 그냥 물어보십시오!

Answer 1

이 작업을 수행하는 핵심 아이디어는 jQuery Masonry에서 gutter option을 사용하는 것입니다.

$(document).ready(function() { 
    var $container = $('#container'); 
    $container.masonry({ 
     itemSelector: '.item', 
     gutter: 12 
    }); 
}); 

http://jsfiddle.net/thirtydot/xECcm/6/

난 그냥 함께 일할 디자인 쉽게하기 위해 box-sizing: border-box;을 사용했다. 당신이 그것을 사용하지 않은 경우, 당신은 width 당신이 수평 패딩 변경 언제든지 조정해야 할 것 :

.container { 
    width: 960px; 
    background: #555; 
} 
.item { 
    width: 231px; 
    background: #fff; 
    padding: 0 10px 15px 10px; 
    -moz-box-sizing: border-box; 
     box-sizing: border-box; 
} 

마지막으로, 상자, 용기의 양쪽 가장자리를 만지지 않도록하기를, 당신은 확인해야 당신의 수는 "맞다".