Zurb基金會列堆積

我有兩列連續。但是這兩列正在垂直堆疊。Zurb基金會列堆積

這裏是我的代碼：

<!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列的div應該出現並排，但低於其他的，而不是堆積在。

來源

2014-12-13 user17282

你告訴你的代碼是設置2（塊）寬的一列，然後4（塊）的寬度，而你需要有整排（它的零件加起來至6

什麼）加起來爲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基金會列堆積

回答

相關問題