Question

我是zurb fooundation fromework的新手，当屏幕尺寸为960px时，有一个问题是让四个图像以单行显示

http://jsfiddle.net/57fBK/1/ 我为桌面版设置了行宽为960px。

当屏幕尺寸介于768px - 960px之间时，我希望显示4张图像。

我希望在屏幕大小介于320px - 769px之间时显示两个图像;

<div class="row">

        <div class="large-3 small-6 columns">   
          <img src="http://placehold.it/480x600&text=[img 1]"/> <p></p>
        </div>

        <div class="large-3 small-6 columns">
           <img src="http://placehold.it/480x600&text=[img 2]"/> <p></p>

        </div>
        <div class="large-3 small-6 columns">  
           <img src="http://placehold.it/480x600&text=[img 3]"/> <p></p>

        </div>
        <div class="large-3 small-6 columns">    
           <img src="http://placehold.it/480x600&text=[img 4]"/> <p></p>

        </div>

Answer 1

只需添加medium-3 http://jsfiddle.net/57fBK/2/

即可

<div class="small-6 medium-3 large-3 columns">   
  <img src="http://placehold.it/480x600&text=[img 1]"/> <p></p>
</div>

<div class="small-6 medium-3 large-3 columns">
   <img src="http://placehold.it/480x600&text=[img 2]"/> <p></p>

</div>
<div class="small-6 medium-3 large-3 columns">  
   <img src="http://placehold.it/480x600&text=[img 3]"/> <p></p>

</div>
<div class="small-6 medium-3 large-3 columns">    
   <img src="http://placehold.it/480x600&text=[img 4]"/> <p></p>     
</div>

当行宽960px时，如何在zurb基础上单行显示四幅图像

1 个答案: