W3.CSS Grid(网格)

2020-12-02 10:04 更新
1
2
3
4
5
6
7
8
9
10
11
12
这个部分将在一个小屏幕上占据12个柱子,在一个中屏幕上占据4个柱子,在一个大屏幕上占据3个柱子。
这部分将在一个小屏幕上占据12列,在一个中等屏幕上占8列,在一个大屏幕上占9列。
1
2
3
4
5
6
7
8
9
10
11
12

实例

<div class="w3-row">

   <div class="w3-col w3-container m4 l3 w3-yellow">

      <p>这个部分将在一个小屏幕上占据 12 个柱子,在一个中屏幕上占据 4 个柱子,在一个大屏幕上占据 3 个柱子.</p>

   </div>

   <div class="w3-col w3-container m8 l9">  

      <p>这部分将在一个小屏幕上占据 12 列,在一个中等屏幕上占 8 列,在一个大屏幕上占 9 列.</p>

      <p>这部分将在一个小屏幕上占据 12 列,在一个中等屏幕上占 8 列,在一个大屏幕上占 9 列.</p>

   </div>

</div>


尝试一下 »

响应行

W3.CSS 的网格系统具有响应能力。这些列将根据屏幕尺寸自动重新排列:在大屏幕上,按三列组织内容可能看起来更好,但是在小屏幕上,如果将内容堆叠在一起,可能会更好。

描述
w3-row 响应类的容器,无填充
w3-row-padding 响应类的容器,左右填充为 8px
w3-col 在 12 列响应式网格中定义一列

w3-col具有以下子类:

小屏幕列(典型的智能手机):

描述
s1 为小屏幕定义 12 列中的 1 列(宽度:08.33%)
s2 为小屏幕定义 12 列中的 2 列(宽度:16.66%)
s3 为小屏幕定义 12 列中的 3 列(宽度:25.00%)
s4 为小屏幕定义 12 列中的 4 列(宽度:33.33%)
s5-s11
s12 定义 12 列中的 12 列(宽度:100%)。小屏幕的默认设置

中型筛网(典型平板电脑)的列:

描述
m1 为中屏幕定义 12 列中的 1 列(宽度:08.33%)
m2 为中屏幕定义 12 列中的 2 列(宽度:16.66%)
m3 为中屏幕定义 12 列中的 3 列(宽度:25.00%)
m4 为中屏幕定义 12 列中的 4 列(宽度:33.33%)
m5 - m11
m12 定义 12 列中的 12 列(宽度:100%)。中屏幕的默认设置

大屏幕列(典型的笔记本电脑和台式机):

描述
l1 为大屏幕定义 12 列中的 1 列(宽度:08.33%)
l2 为大屏幕定义 12 列中的 2 列(宽度:16.66%)
l3 为大屏幕定义 12 列中的 3 列(宽度:25.00%)
l4 为大屏幕定义 12 列中的 4 列(宽度:33.33%)
l5 - l11
l12 定义 12 列中的 12 列(宽度:100%)。大屏幕的默认设置

上面的类可以组合起来以创建更多动态和灵活的布局。

每个类别都会按比例增加,因此,如果您希望为小,中和大屏幕设置相同的宽度,则只需指定小类别。而且,如果您希望在中型和大型屏幕上使用相同的宽度,则只需指定中级类。

但是,如果仅使用中级和/或大型类,则在小屏幕上,宽度将始终转换为 100%。

注意:每行的列数总和应为 12(6 + 6、3 + 3 + 6、9 + 3等)!

两列相等

所有屏幕尺寸上的两个等宽列(50%/ 50%):


50%
50%


实例

<div class="w3-row">

  <div class="w3-col s6 w3-green w3-center">

    <p>50%</p>

  </div>

  <div class="w3-col s6 w3-dark-grey w3-center">

    <p>50%</p>

  </div>

</div>


尝试一下 »

两列不相等

在所有屏幕尺寸上,两列宽度不相等(25%/ 75%):

25%
75%


实例

<div class="w3-row">

  <div class="w3-col s3 w3-green w3-center">

    <p>25%</p>

  </div>

  <div class="w3-col s9 w3-dark-grey w3-center">

    <p>75%</p>

  </div>

</div>


尝试一下 »

三列相等

所有屏幕尺寸上的三个等宽列(33.3%/ 33.3%/ 33.3%):

33.3%
33.3%
33.3%


实例

<div class="w3-row">

  <div class="w3-col s4 w3-green w3-center">

    <p>33.3%</p>

  </div>

  <div class="w3-col s4 w3-dark-grey w3-center">

    <p>33.3%</p>

  </div>

  <div class="w3-col s4 w3-red w3-center">

    <p>33.3%</p>

  </div>

</div>


尝试一下 »

三列不相等

平板电脑,笔记本电脑和台式机上的三个不同宽度的列(25%/ 50%/ 25%)。在手机上,这些列将自动堆叠(宽度为 100%):

25%
50%
25%


实例

<div class="w3-row">

  <div class="w3-col m3 w3-green w3-center">

    <p>25%</p>

  </div>

  <div class="w3-col m6 w3-dark-grey w3-center">

    <p>50%</p>

  </div>

  <div class="w3-col m3 w3-red w3-center">

    <p>25%</p>

  </div>

</div>


尝试一下 »

注意:此示例与使用 w3-quarter(m3),w3-half(m6),w3-quarter(m3)相同,您在 W3.CSS响应式 一章中了解到。

六栏

平板电脑,笔记本电脑和台式机上有六个等宽的列(每个占 16%)。在手机上,这些列将自动堆叠(宽度为 100%):

16%
16%
16%
16%
16%
16%


实例

<div class="w3-row">

  <div class="w3-col m2 w3-green w3-center">

    <p>16%</p>

  </div>

  <div class="w3-col m2 w3-red w3-center">

    <p>16%</p>

  </div>

  <div class="w3-col m2 w3-blue w3-center">

    <p>16%</p>

  </div>

  <div class="w3-col m2 w3-dark-grey w3-center">

    <p>16%</p>

  </div>

  <div class="w3-col m2 w3-black w3-center">

    <p>16%</p>

  </div>

  <div class="w3-col m2 w3-purple w3-center">

    <p>16%</p>

  </div>

</div>


尝试一下 »

混合:手机和笔记本电脑

您可以结合使用类来创建动态灵活的布局。本示例将生成两列布局,在大屏幕上拆分为 83.34%/ 16.66%(l10,l2),在小屏幕上拆分为 50%/ 50%(s6,s6):

83.34%
16.66%


实例

<div class="w3-row">

  <div class="w3-col l10 s6 w3-green w3-center"><p>l10 s6</p></div>

  <div class="w3-col l2 s6 w3-dark-grey w3-center"><p>l2 s6</p></div>

</div>


尝试一下 »

混合:手机,平板电脑和笔记本电脑

此示例将产生一个三列布局,其中大屏幕拆分为 25%/ 58.34%/ 16.66%(l3,l7,l2),中型屏幕拆分为 50%/ 25%/ 25%(m6,m3,m3),在小屏幕上分割为 33.3%/ 33.3%/ 33.3%(s4,s4,s4):

25%
58.34%
16.66%


实例

<div class="w3-row">

  <div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>

  <div class="w3-col l7 m3 s4 w3-dark-grey w3-center"><p>l7 m3 s4</p></div>

  <div class="w3-col l2 m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>

</div>


尝试一下 »

w3-row 和 w3-row-padding 之间的区别

w3-row 类定义了一个无填充的容器,而 w3-row-padding 类向每列添加了 8px 的左右填充:

w3-row:



实例

  <div class="w3-row">

    <div class="w3-col s4">

      <img src="img_lights.jpg" style="width:100%">

    </div>

    <div class="w3-col s4">

      <img src="img_nature.jpg" style="width:100%">

    </div>

    <div class="w3-col s4">

      <img src="img_snowtops.jpg" style="width:100%">

    </div>

  </div>


尝试一下 »

使用 w3-rest

w3-rest 类是会用什么剩下的网格列的一个强大而灵活的类。

20%
80%


90%
10%


20%
60%
20%


25%
10%
40%
25%


25%
25%
20%
30%


实例

<div class="w3-row">

  <div class="w3-col w3-container w3-blue" style="width:150px"><p>150px</p></div>

  <div class="w3-rest w3-container w3-green"><p>w3-rest</p></div>

</div>


尝试一下 »


使用 class =“ w3-rest”的元素必须始终是源代码中的最后一个元素。

使用百分比

使用 CSS width 属性确定列的特定宽度。

20%
60%
20%


45%
55%


15%
35%
10%
30%
10%


实例

<div class="w3-row">

  <div class="w3-col w3-green w3-container" style="width:20%"><p>20%</p></div>

  <div class="w3-col w3-blue w3-container" style="width:60%"><p>60%</p></div>

  <div class="w3-col w3-red w3-container" style="width:20%"><p>20%</p></div>

</div>


尝试一下 »


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号