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基金会列堆积

回答

相关问题