Foundation CSS(v6)中如何实现含图片的文本列水平排列？

兄弟我太懂你这种卡半天的烦躁了！从Skeleton转Foundation确实容易踩一些基础坑，咱们一步步排查，肯定能搞定：

1. 先检查最核心的Grid结构是否正确 #

Foundation的列布局必须严格遵循「容器 → 行 → 列」的层级，而且列的宽度总和要等于12（Foundation的网格是12列系统）。很多时候列垂直堆叠都是因为漏了.row包裹，或者列的宽度设置不对。

正确的基础结构应该是这样的：

<!-- 外层容器可选，但建议加上，用来控制页面宽度 -->
<div class="container">
  <!-- 必须用.row包裹所有列，它是flex布局的容器 -->
  <div class="row">
    <!-- 每一列设置small-4，在所有屏幕尺寸下都占4/12的宽度，三列刚好填满一行 -->
    <div class="columns small-4">
      <img src="你的图片路径" alt="Block1">
      <p>Block1的文本内容</p>
    </div>
    <div class="columns small-4">
      <img src="你的图片路径" alt="Block2">
      <p>Block2的文本内容</p>
    </div>
    <div class="columns small-4">
      <img src="你的图片路径" alt="Block3">
      <p>Block3的文本内容</p>
    </div>
  </div>
</div>

划重点：如果没有.row，列会默认垂直排列，这是最常见的错误！

2. 确认Foundation的资源是否正确引入并初始化 #

Foundation 6的Grid虽然主要靠CSS，但如果你的页面用到了JS组件（比如Equalizer），必须确保：

• 正确引入了Foundation的CSS文件（比如foundation.min.css）
• 正确引入了jQuery（如果用jQuery版本的Foundation）和foundation.min.js
• 在页面底部添加初始化代码：

// jQuery版本
$(document).foundation();

// 原生JS版本（如果用的是Foundation的原生JS版）
document.addEventListener('DOMContentLoaded', function() {
  Foundation.init();
});

如果漏了初始化，Equalizer这类组件会失效，但Grid本身的并排布局其实不需要JS，不过还是要确保CSS文件没引错。

3. 检查图片是否撑开了列 #

如果图片没有设置自适应宽度，会把列的宽度撑得超过设定值，导致换行。Foundation默认给所有图片加了max-width: 100%，但如果你的自定义CSS覆盖了这个样式，就会出问题。可以强制给图片加：

img {
  max-width: 100%;
  height: auto;
}

这样图片会自动适应列的宽度，不会撑破布局。

4. 排查自定义CSS的冲突 #

如果你写了自己的样式，可能不小心修改了列的布局属性，比如给.columns加了display: block或者float: left（Foundation 6默认用flex布局，不需要float）。可以用Chrome的开发者工具（F12）检查列的样式，看是否有被覆盖的flex相关属性。

关于Equalizer的补充说明 #

你提到用了Equalizer，但要注意：Equalizer是用来让列等高的，不是用来让列并排的！它的作用是让高度不同的列（比如文本多少不一样）保持一样的高度，前提是列已经水平并排了。正确的Equalizer用法是给.row加data-equalizer，给每个列加data-equalizer-watch：

<div class="row" data-equalizer>
  <div class="columns small-4" data-equalizer-watch>
    <!-- 内容 -->
  </div>
  <div class="columns small-4" data-equalizer-watch>
    <!-- 内容 -->
  </div>
  <div class="columns small-4" data-equalizer-watch>
    <!-- 内容 -->
  </div>
</div>

所以先解决列并排的问题，再用Equalizer处理等高就没问题了。

先从最基础的结构检查开始，大概率是漏了.row或者列的宽度设置错了，祝你顺利解决！

内容的提问来源于stack exchange，提问作者Tim