如何在基础CSS中水平获取文本呈现列?



在Foundation CSS(v6)中,我正在尝试并排获取三列文本(也有图像)。例如:

座 1 |区块2 |块3

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

块1

块2

块3

我假设Foundation CSS会解决这个问题,我不需要编写自己的CSS代码 - 因为这是文档所建议的。

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

例如,您可以从此站点看到我想要实现的目标: https://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

。是的,我已经尝试使用foundation.equalizer.js正如它所描述的那样,我仍然得到相同的结果。

当我使用 Skeleton 框架时,我从来没有遇到过正确渲染列的问题。

任何帮助将不胜感激,因为这会花费大量时间才能无处可去。

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

确保以某种方式包含基础.css。有很多方法可以实现这一点。此类导入通常在页面头部可见。

简单的方法是在页面的 head 部分添加以下代码:

<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),则类名已修改。 行由网格 X 替换,列由单元格等替换。 确保选择正确的网格系统。

最新更新