我有两列连续。但是这两列是垂直堆叠的。
这是我的代码:
<!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( block )宽度，然后 4( block )宽度，加起来是 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>
希望对您的问题有所帮助。
关于html - Zurb Foundation 柱堆叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27454472/