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应该出现并排,但低于其他的,而不是堆积在。
答
你告诉你的代码是设置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>
我希望这可以帮助你解决你的问题。