Xây dựng: loại bỏ máng xối từ cột cuối

Question

Đã làm việc với phiên bản mới của Masonry có vẻ hoạt động trơn tru hơn nhiều, đặc biệt là đối với chất lỏng/phản hồi mà tôi đang thực hiện.

Một vấn đề tôi đã gặp phải, tuy nhiên - Tôi không chắc chắn làm thế nào để loại bỏ máng xối ở phía bên phải của thùng chứa .masonry để các mục được tuôn ra với các cạnh.

Dưới đây là ví dụ codepen: http://codepen.io/iamkeir/pen/xlcBj

tôi có khả năng có thể thiết lập chiều rộng và overflow:hidden để cắt ra rằng khoảng cách cuối cùng, nhưng không phải là lý tưởng.

Tương tự, tôi đã thử thêm padding-left: 1% nhưng điều này thay đổi chiều rộng của vùng chứa để tỷ lệ phần trăm không còn chính xác nữa.

Bất kỳ ý tưởng/mẹo nào sẽ được đánh giá rất nhiều!

Answer 1

Bạn có thể thử wookmark hoặc packery để loại bỏ máng xối bên phải.

Answer 2

@desandro vui lòng tweet giải pháp - vấn đề là với% tính toán của tôi lẽ ra phải là:

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

Vì vậy, trong ví dụ của tôi: (100% - (4 * 24%))/3) = 1.33333333333333%

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

Answer 3

tôi có thể làm điều này với calc(). Sử dụng 0 lề, 0 đệm, một rãnh 20px và một lưới 1200px, đây là một thiết kế cho 1, 2, 3 và 4 cột tuôn ra trái và phải. Calc -10px sẽ quấn, vì vậy tôi đã phải sử dụng -11px trong tính toán của tôi:

 #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; 
      } 
     }