Zurb Foundation 컬럼이 스택 됨

두 개의 컬럼이 연속적으로 있습니다. 그러나 두 개의 기둥은 수직으로 쌓여 있습니다.Zurb Foundation 컬럼이 스택 됨

여기 내 코드입니다 :

<!doctype html> 
<html class="no-js" lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Foundation | Welcome</title> 
    <link rel="stylesheet" href="css/foundation.css" /> 
    <script src="js/vendor/modernizr.js"></script> 
    </head> 
    <body> 



<div class="row"> 
    <div class="small-2 columns"><p>2 columns</p> 
    </div> 
    <div class="small-4 columns"><p>10 columns</p> 
    </div> 
</div> 
    <script src="js/vendor/jquery.js"></script> 
    <script src="js/foundation.min.js"></script> 
    <script> 
     $(document).foundation(); 
    </script> 
    </body> 
</html>

2 개의 열 DIV와 4 열 사업부는 나란히 나타납니다 대신 다른 아래에 적층되어있다. 당신의 이야기 코드가 당신이 그 (그 부분을 전체 행을 가질 필요가있는 반면 6

까지 추가 2 (블록) 폭의 열 후 4 (블록) 폭을 설정하는 것입니다 무엇

출처

2014-12-13 user17282

) 최대 12 개를 추가 할 수 있습니다. 12 개까지 사용할 수있는 다양한 숫자 조합이 있지만 간단한 설명을 위해 주석 처리 된 값을 사용합니다.

<div class="row"> 
    <div class="small-2 columns"><p>2 columns</p> </div> 
    <div class="small-10 columns"><p>10 columns</p> </div> 
</div>

또는 귀하가 달성하려고 시도했던 것의 모습을 보여주기 위해 비율을 사용할 수 있습니다.

<div class="row"> 
    <div class="small-4 columns"><p>1/3 width in columns</p> </div> 
    <div class="small-8 columns"><p>2/3 with columns</p> </div> 
</div>

귀하의 질문에 도움이 되었기를 바랍니다.

출처

2014-12-13 15:09:56

Zurb Foundation 컬럼이 스택 됨

답변

관련 문제