Zurb 基础柱子堆积起来答案

【问题标题】：Zurb Foundation columns getting stackedZurb 基础柱子堆积起来
【发布时间】：2014-12-13 23:09:56
【问题描述】：

我连续有两列。但是这两列是垂直堆叠的。

这是我的代码：

<!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 应该并排显示，但堆叠在另一个下方。

【问题讨论】：

标签： html css zurb-foundation

【解决方案1】：

您告诉您的代码是设置一列宽度为 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>

我希望这对您的问题有所帮助。

【讨论】：