html – 如何在zurb 5基础中做5列

概述我想要有一列5列,只有1列用于小型设备屏幕,宽度小于480px. 我是新兴的zurb基金会,仍然在学习. 小提琴示例http://jsfiddle.net/V7TuY/1/ <div class="row"> <div class="small-6 medium-3 large-3 columns"> <img src="http://placehold.it/480x60 我想要有一列5列,只有1列用于小型设备屏幕,宽度小于480px.

我是新兴的zurb基金会,仍然在学习.

小提琴示例http://jsfiddle.net/V7TuY/1/

<div >    <div >        <img src="http://placehold.it/480x600&text=[img 1]" />        <p></p>    </div>    <div >        <img src="http://placehold.it/480x600&text=[img 2]" />        <p></p>    </div>    <div >        <img src="http://placehold.it/480x600&text=[img 3]" />        <p></p>    </div>    <div >        <img src="http://placehold.it/480x600&text=[img 4]" />        <p></p>    </div>    <div >        <img src="http://placehold.it/480x600&text=[img 5]" />        <p></p>    </div>

更好的这种事情与列或列表ul li

解决方法 在你的例子中,你有5< div>每行中等3和大3 = 15单位.基金会将配合前4名(4 * 3 = 12单位),然后第五名将被推到下面.

一个想法适合您的5个项目,是给所有的中等2宽度(10个单位),并将该行左偏移一个单位(类medium-offset-1 on first element),并告诉基金会第五个元素是你的行中的最后一个(end on the last element课).

例如：

<div >  <div >       <img src="http://placehold.it/480x600&text=[img 1]"/>  </div>  <div >       <img src="http://placehold.it/480x600&text=[img 1]"/>  </div>  <div >       <img src="http://placehold.it/480x600&text=[img 1]"/>  </div>  <div >       <img src="http://placehold.it/480x600&text=[img 1]"/>  </div>  <div >       <img src="http://placehold.it/480x600&text=[img 1]"/>  </div></div>

http://jsfiddle.net/V7TuY/4/

中等偏移-1的要点是将内容置于中心位置(以一种时尚之后)：您有10个单位适合可能的位置.偏移量为1,并且使用最终将使您在你的内容但是,如果您希望它位于页面的左侧,请从上面的示例中删除medium-offset-1类.

注意 – 您在这里确实只需要中等2和中等偏移量-2,默认情况下也适用于大型网格,除非被类big- *或large-offset- *覆盖.

总结

以上是内存溢出为你收集整理的html – 如何在zurb 5基础中做5列全部内容，希望文章能够帮你解决html – 如何在zurb 5基础中做5列所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。