Question

当缩放窗口列时，我们没有任何建议？似乎如果列不是相同的大小恰好落在小-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

如果我理解正确，那么小屏幕就会出现问题。也许清除浮动元素可以帮助你。此清算仅适用于小屏幕

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

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

.clearfix {
  *zoom: 1; 
}

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

.clearfix:after {
    clear: both; 
}

解决基金会5中的问题

1 个答案: