Foundation 网格 - 水平堆叠 - Foundation5 教程-OGeek|极客世界-中国程序员成长平台

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› Foundation5›Foundation5 教程

Foundation 网格 - 水平堆叠

原作者: [db:作者] 来自: [db:来源] 收藏邀请

Foundation 网格 - 水平堆叠

以下实例创建了一个基本的网格系统，在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。

实例

<div class="row">
  <div class="medium-6columns" style="background-color:yellow;">
    <p>W3Cschool在线教程</p>
  </div>
  <div class="medium-6columns" style="background-color:pink;">
    <p>W3Cschool在线教程</p>
  </div>
</div>

尝试一下 »

	提示: `.small\|medium\|large-` 类中的数字指定了跨越的列数。所以， `.small-1` 跨越 1 列, `.small-4` 跨越 4 列, `.small-6` 跨越 6 列 (50% 宽度) 等。注意:* 要保证数列加起来是 12 列!