html - 修复 Foundation 5 中的问题

Question

当缩放窗口列时，我们会掉出网格，有人有什么建议吗？ 似乎如果列的大小不一样，就会掉出 small-6

<div class="large-3 columns small-6 text-center"><img src="img/1.png" width="150" height="150">
  <h2> 1</h2>
  <h3>Lorem ipsum dolor sit amet</h3>
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis </p></div>
<div class="large-3 columns small-6 text-center">
<img src="img/2.png" width="150" height="150">
  <h2>2</h2>
  <h3> Lorem ipsum </h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet veniam, quis  </p></div>

<div class="large-3 columns small-6 text-center">
<img src="img/3.png" width="150" height="150">
<h2>3</h2>
  <h3>Is even more essential</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut wisi enim ad minim veniam, quis </p></div>
<div class="large-3 columns small-6 text-center">
<img src="img/4.png" width="150" height="150">
 <h2>4</h2>
  <h3>Lorem ipsum dolor sit</h3>
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis </p></div>
</div>![enter image description here][1]

Answer 1

如果我没理解错，你的问题出在小屏幕上。也许清除 float 元素可以帮助你。此清除将仅针对小屏幕显示

尝试在两个 .columns 元素之后添加:

<div class="clearfix show-for-small"></div>

.clearfix {
  *zoom: 1; 
}

.clearfix:before, 
.clearfix:after {
    content: " ";
    display: table; 
}

.clearfix:after {
    clear: both; 
}