Question

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

这是我的代码：

<!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应并排显示，而是堆叠在另一列之下。

Answer 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>

我希望这可以帮助您解决问题。

Zurb基金会专栏越来越多

1 个答案: