修復基金會5中的問題

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; 
}