벽돌 : 마지막 열에서 거터를 제거하십시오.

Question

제가하고있는 유동성/반응성 구조에 대해 훨씬 더 부드럽게 작동하는 것으로 보이는 새로운 버전의 Masonry에서 작업 해 왔습니다.

그러나 내가 만난 한 가지 문제점은 - 항목이 가장자리와 동일하도록 masonry 컨테이너의 맨 오른쪽에있는 제본 용 여백을 제거하는 방법을 모르겠습니다. 지난 격차 것을 떨어져자를 수 http://codepen.io/iamkeir/pen/xlcBj

나는 잠재적으로 폭을 설정할 수

및 overflow:hidden하지만 적합하지 :

다음은 codepen 예입니다.

동일하게, padding-left: 1%을 추가하려고 시도했지만 컨테이너의 너비가 변경되어 비율이 정확하지 않게되었습니다.

모든 아이디어/팁을 크게 높이세요!

Answer 1

오른쪽 쇄석을 제거하기 위해 훅 마크 또는 포장을 시도 할 수 있습니다.

Answer 2

@desandro 친절 솔루션을 트윗 - 문제가 있었어야 내 % 계산으로했다 :

(container width - (columns * column width))/number of gutters = gutter width

그래서, 내 예제 : 나는 (100% - (4 * 24%))/3) = 1.33333333333333%

http://codepen.io/desandro/pen/ybluC

Answer 3

했다 calc()로 이것을 할 수있다. 0 여백, 0 패딩, 20px 거터 및 1200px 격자를 사용하여 왼쪽과 오른쪽으로 나란히 놓인 1, 2, 3 및 4 열의 디자인이 있습니다. Calc의 10 픽셀은 줄 바꿈 될 것이므로 계산시 -11px를 사용해야했습니다.

 #grid .item { 
      float: left; 
      padding: 0; 
      width: 100%; 
      margin: 0; 
     } 

     @media only screen and (min-width: 500px) { 
      #grid .item { 
       width: calc(50% - 11px); 
      } 
     } 

     @media only screen and (min-width: 800px) { 
      #grid .item { 
       width: calc(33% - 11px); 
      } 
     } 

     @media only screen and (min-width: 1200px) { 
      #grid .item { 
       width: 285px; 
      } 
     }