📌  相关文章
📜  W3.CSS-网格

📅  最后修改于: 2020-10-17 05:11:11             🧑  作者: Mango

W3.CSS提供了12列流体响应网格。

它使用w3-row和w3-col样式类分别定义行和列。

Sr. No. Class Name & Description
1

w3-row

Specifies a padding-less container to be used for responsive columns. This class is mandatory for responsive classes to be fully responsive.
2

w3-col

Specifies a column with sub-classes

w3-col具有几个子类，分别用于不同类型的屏幕。

小屏幕设备的列

这是小屏幕设备（通常是智能手机）的列级样式的列表。

Sr. No. Class Name & Description
1

s1

Defines 1 of 12 columns with width as 08.33%.
2

s2

Defines 2 of 12 columns with width as 16.66%.
3

s3

Defines 3 of 12 columns with width as 25.00%.
4

s4

Defines 4 of 12 columns with width as 33.33%.
5

s12

Defines 12 of 12 columns with width as 100%. Default class for small screen phones.

中型屏幕设备的列

这是中型屏幕设备（通常为平板电脑）的列级样式的列表。

Sr. No. Class Name & Description
1

m1

Defines 1 of 12 columns with width as 08.33%.
2

m2

Defines 2 of 12 columns with width as 16.66%.
3

m3

Defines 3 of 12 columns with width as 25.00%.
4

m4

Defines 4 of 12 columns with width as 33.33%.
5

m12

Defines 12 of 12 columns with width as 100%. Default class for medium screen phones.

大屏幕设备的列

这是大屏幕设备（通常是笔记本电脑）的列级样式的列表。

Sr. No. Class Name & Description
1

|1

Defines 1 of 12 columns with width as 08.33%.
2

|2

Defines 2 of 12 columns with width as 16.66%.
3

|3

Defines 3 of 12 columns with width as 25.00%.
4

|4

Defines 4 of 12 columns with width as 33.33%.
5

|12

Defines 12 of 12 columns with width as 100%. Default class for large screen devices.

用法

每个子类都根据设备的类型确定要使用的网格的列数。考虑以下HTML代码段。


   

      
This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.

如果在HTML元素的class属性中未提及子类，则设备上要使用的默认列为12。

例

w3css_grids.htm

现场演示
The W3.CSS Grids
      
      
   

   
      

         
Mobile First Design Demo

         
Resize the window to see the effect!

      

      

         
1

         
2

         
3

         
4

      
         
5

         
6

         
7

         
8

      
         
9

         
10

         
11

         
12

      

      
      

         

            
This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).

         

      
         

            
This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).

结果

验证结果。