2016-08-17 9 views
0

그래서 나는이처럼 2 열 벽돌 레이아웃을 만들려고 해요 : http://i.stack.imgur.com/gq6LJ.png벽돌 : 2 열 레이아웃을 사용하면 어떻게 다른 열보다 1 열 넓게 있습니까?

나는이 각 격자 항목의 특정 폭을 설정하지 않아도, 같이 자동으로 작동하도록하는 방법을 잘 모르겠어요 .

기사를 반복하고 있기 때문에 특정 폭이 설정되지 않았습니다. 나는 오른쪽에있는 것이 60 % 너비이고 왼쪽에있는 것은 30 % 너비가되어야합니다.

<div class="grid"> 
    <div class="grid-sizer"></div> 
    <div class="gutter-sizer"></div> 
    <article class="grid-item"> 
     <!-- Content --> 
    </article> 
</div> 

Here is a codepen of my attempt at getting this to work.

은 벽돌로이 경우에도 가능합니까?

아마도 다른 그리드 라이브러리가 있습니까?

답변

0

아니, 읽은 내용, 벽돌은 당신이 그렇게 원하는 것 같은 ... 항목의 고정 된 크기의 단일 열을 생산하는

내가 jQuery를 사용하여 윈도우의 폭을 취득 것이며 그 비율을 할당하는 것이 아닙니다에서 이 같은 컨테이너 요소에 폭 ...

$(document).ready(function(){ 
    var cWidth = $(window).width() * .7; // 70% or whatever you want 
    cWidth.toFixed(0); 
    $('#container').width(cWidth); 

    $(window).resize(function() { 
     var crWidth = $(window).width() * .7; // 70% or whatever you want 
     crWidth.toFixed(0); 
     $('#container').width(crWidth); 
    }); 
}); 

는 그런 다음 자식 요소 '(열)이 같은 CSS에서 폭 ...

.left-column { 
    width: 35%; 
} 

.right-column { 
    width: 65% 
} 
+0

네를 설정하지만 차별화 클래스가 없습니다 처럼 그 그리드 항목 요소에. 이것이 주요한 문제입니다. – Corey

+0

벽돌이 당신이 필요로하는 방식대로 작동한다고 나는 생각하지 않습니다. –