두 열 벽돌은

Question

나는 다음과 같은 CodePen을 만들었습니다 http://codepen.io/anon/pen/wmjHy

아이디어는 그들 사이에 간격이 20 픽셀을 가져야 상자의 2 열 벽돌을 가지고있는. box-sizing을 border-box으로 설정하여 각 항목의 테두리와 안쪽 여백을 무시했습니다.

그러나 두 번째 열이 첫 번째 열 아래로 접히고 있습니다. 아마도 50%과 두 개의 상자 (왼쪽 및 오른쪽)에 20px가 추가되어 있기 때문일 수 있습니다.

해결 방법에 대한 의견이 있으십니까?

나는 아마 일을 검토 한 결과 :

'columnWidth': $('.masonry').width()/2을하고 CSS에서 100%에 .item 세트를 가지고 있지만 그 시궁창이 오른쪽 열 상자에 추가됩니다 아마도 때문에 ... 중 하나가 작동하지 않는 것 너무?

JS :

이

$(document).ready(function(){ 

    $('.masonry').masonry({ 
    'itemSelector': '.item', 
    'gutter': 20 
    }); 

}); 

CSS :

이

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

body { 

    margin: 0; 
    font-family: sans-serif; 
    padding: 20px; 
} 

.masonry { 
    background: #ff0000; 
} 

.masonry .item { 
    width: 50%; 
    height: 100px; 
    float: left; 
    background: #eeeeee; 
    border: 1px solid #333; 
    margin-bottom: 20px; 
} 

HTML이 :

<div class="masonry"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div> 

Answer 1

당신은 당신의 $(document).ready

$(window).on("resize load", function() { 
    var desired_width = $(".masonry").width()/2 - 10 
    $('.masonry .item').css("width", desired_width) 
    }) 

에 다음을 추가하는 경우

원하는 결과를 제공해야합니다.

Answer 2

저는 두 열 석공 술의 솔루션을 만들었습니다. 30px의 간격이 있습니다. 여전히 두 열에 추가되지만 격자 요소에 overflow:hidden을 추가하면 원하지 않는 오른쪽 여백이 가려집니다. 여기

Codepen : http://codepen.io/natbatwat/pen/VLJjmy