javascript - 如何在基础 CSS 中水平获取文本渲染列？

Question

在 Foundation CSS (v6) 中，我试图并排获取三列文本(也包含图像)....例如:

区 block 1 | Block2 | block 3

我在 Chrome 浏览器阅读器中得到的是:

block 1

block 2

block 3

我假设 Foundation CSS 会处理这个问题，我不需要编写自己的 CSS 代码 - 正如文档所建议的那样。

我已经阅读并尝试了几乎每个代码示例，但没有任何变化 - 列是垂直呈现的，而不是并排呈现的。

例如你可以从这个网站看到我想要实现的目标: https://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

...是的，我已经尝试使用 foundation.equalizer.js，但我仍然得到相同的结果。

当我使用 Skeleton 框架时，我从未遇到过正确呈现列的问题。

任何帮助都将不胜感激，因为这会花费大量时间而无济于事。

我真的希望这是用户错误 :-) 以及我错过的一些基本知识。

Answer 1

确保以某种方式包含 foundation.css。有很多方法可以实现这一目标。这样的导入通常在页面的头部可见。

一个简单的方法是在页面的头部添加以下代码:

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet">

您还应该包含 Javascript 包:

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>

最后，确保在文档末尾调用 $(document).foundation(假设您安装了 jQuery)。

如果您使用最新的网格技术 (XY-Grid)，类名已被修改。行替换为 grid-x，列替换为单元格等。确保选择正确的网格系统。