Question

简单的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>

现在由于数字标签布局中断，数字标签取代了。任何解决方案？

Answer 1

我没有现场查看代码的假设是，您没有删除大多数浏览器默认添加的figure元素的边距。

webkit上的默认figure样式

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

默认情况下，基础包括normalize.css，它将figure元素设置为display:block;，但它不会删除应用于它的默认边距。试试这个：

可能的修复

figure{
  margin:0;
}

Answer 2

有同样的问题并使用：

figure{
margin: 1em 0;
}

为顶部和底部边距添加了1em，并从添加了0左和右。

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

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

在Foundation 5中绘制网格问题

2 个答案: