Foundation 5 中的图形网格问题答案

【问题标题】：Figure grid issue in Foundation 5Foundation 5 中的图形网格问题
【发布时间】：2014-03-25 08:51:19
【问题描述】：

简单的 Zurb 基础 5 代码与 div 类中的图像：

 `<header class="row">
 <div class="large-4 columns">
 <img alt="Bar chart" src="analytics.gif" />
 <figcaption>Figure Caption Here
 </figcaption>
 </div>

 <hgroup class="large-2 columns">
 <h1>Heading1</h1>
 <h2>Heading2</h2>
 </hgroup>

 <nav class="large-6 small-12 columns">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Meet the team</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav>
 </header>`

但是当 div 类被图替换时： <figure class="large-4 columns"> <img alt="Bar chart" src="analytics.gif" /> <figcaption>Figure Caption Here </figcaption> </figure>

现在由于图形标签布局中断，图形标签移位。有什么解决办法吗？

【问题讨论】：

fiddle 或 codepen 演示的链接会很棒。

标签： grid tags zurb-foundation figure

【解决方案1】：

如果没有实时站点来查看您的代码，我的假设是您没有删除大多数浏览器默认添加的figure 元素的边距。

webkit 上的默认 figure 样式

figure {
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 40px;
   -webkit-margin-end: 40px;
}

Foundation 默认包含 normalize.css，它将 figure 元素设置为 display:block;，但是它不会删除应用到它的默认边距。试试这个：

可能的修复

figure{
  margin:0;
}

【讨论】：

【解决方案2】：

遇到同样的问题并使用：

figure{
margin: 1em 0;
}

为 top 和 bottom margins 添加了 1em，并从 left 中删除了 0 > 和正确。

否则，您可以进入Foundation 5 并在那里对normalize.css 文件进行修改：

bower_components > foundation > css > normalize.css > line 165

【讨论】：