Foundation 网格 - 水平堆叠
以下实例创建了一个基本的网格系统,在 PC 和平板设备上它是水平平铺的,在手机等小型设备上它是水平堆叠的。
实例
<div class="row">
<div class="medium-6 columns" style="background-color:yellow;">
<p>菜鸟教程</p>
</div>
<div class="medium-6 columns" style="background-color:pink;">
<p>菜鸟教程</p>
</div>
</div>
<div class="medium-6 columns" style="background-color:yellow;">
<p>菜鸟教程</p>
</div>
<div class="medium-6 columns" style="background-color:pink;">
<p>菜鸟教程</p>
</div>
</div>
![]() | 提示: .small|medium|large-* 类中的数字指定了跨越的列数。所以, .small-1 跨越 1 列, .small-4 跨越 4 列, .small-6 跨越 6 列 (50% 宽度) 等。注意: 要保证数列加起来是 12 列! |
---|
王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat