W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 响应式



响应式类

W3.CSS包括一个响应式,移动优先的网格系统来处理您的布局:

1/2

1/2

1/3

1/3

1/3

1/3

2/3

1/4

1/4

1/4

1/4

1/2

1/4

1/4

2/3

1/3

3/4

1/4

1/4

1/4

1/2

1/4

1/2

1/4

50px

rest

1/4

rest

100px

45px

rest

W3.CSS的网格系统是响应式的,列将根据屏幕尺寸自动重新排列:

描述
w3-half 占用窗口的1/2(中大屏幕)
w3-third 占用窗口的1/3(中大屏幕)
w3-twothird 占用窗口的2/3(中大屏幕)
w3-quarter 占用窗口的1/4(中大屏幕)
w3-threequarter 占用窗口的3/4(中大屏幕)
w3-rest 定义一行的其余部分
w3-col 定义12列响应流网格中的一列(更多的详细内容将在后面的章节进行讲解)

响应行

响应式类必须放在 w3-row 内才能是一个完整的响应式。

描述
w3-row 响应式类 定义一个 padding-less 容器。
w3-row-padding 定义用于 响应式类 的填充容器。

w3-half 类

w3-half 类的宽度是父元素的1/2(style="width:50%")。

在小于601像素的屏幕上,它将调整到100%。

w3-half

w3-half

Example

<div class="w3-row">
  <div class="w3-green w3-container w3-half">
    <h2>w3-half</h2>
  </div>
  <div class="w3-container w3-half">
    <h2>w3-half</h2>
  </div>
</div>
尝试一下 »

w3-third 类

w3-third 类的宽度是父元素的1/3(style="width:33.33%")。

在小于601像素的屏幕上,它将调整到100%。

w3-third

w3-third

w3-third

Example 使用 w3-third

<div class="w3-row">
  <div class="w3-green w3-container w3-third">
    <h2>w3-third</h2>
  </div>
  <div class="w3-container w3-third">
    <h2>w3-third</h2>
  </div>
  <div class="w3-container w3-third">
    <h2>w3-third</h2>
  </div>
</div>
尝试一下 »

w3-twothird 类

w3-twothird 类的宽度是父元素的2/3(style="width:66.66%")。

在小于601像素的屏幕上,它将调整到100%。

w3-twothird

w3-third

Example 使用 w3-third

<div class="w3-row">
  <div class="w3-green w3-container w3-third">
    <h2>w3-twothird</h2>
  </div>
  <div class="w3-container w3-third">
    <h2>w3-third</h2>
  </div>
</div>
尝试一下 »

w3-quarter 类

w3-quarter 类的宽度是父元素的1/4(style="width:25%")。

在小于601像素的屏幕上,它将调整到100%。

w3-quarter

w3-quarter

w3-quarter

w3-quarter

Example 使用 w3-quarter

<div class="w3-row">
  <div class="w3-green w3-container w3-quarter">
    <h2>w3-quarter</h2>
  </div>
  <div class="w3-container w3-quarter">
    <h2>w3-quarter</h2>
  </div>
  <div class="w3-container w3-quarter">
    <h2>w3-quarter</h2>
  </div>
  <div class="w3-container w3-quarter">
    <h2>w3-quarter</h2>
  </div>
</div>
尝试一下 »


w3-threequarter 类

w3-threequarter 类的宽度是父元素的3/4(style="width:75%")。

在小于601像素的屏幕上,它将调整到100%。

w3-quarter

w3-quarter

Example 使用 w3-threequarter

<div class="w3-row">
  <div class="w3-green w3-container w3-threequarter">
    <h2>w3-threequarter</h2>
  </div>
  <div class="w3-container w3-quarter">
    <h2>w3-quarter</h2>
  </div>
</div>
尝试一下 »

组合

w3-quarter

w3-half

w3-quarter


w3-quarter

w3-quarter

w3-half


w3-half

w3-quarter

w3-quarter


w3-third

w3-twothird


w3-quarter

w3-threequarter


嵌套行

Example: w3-half 嵌套 w3-half

<div class="w3-row">
  <div class="w3-half w3-container">
    <h2>w3-half</h2>
    <div class="w3-row">
      <div class="w3-half w3-container w3-red">
        <h2>w3-half</h2>
        <p>This is a paragraph.</p>
      </div>
      <div class="w3-half w3-container">
        <h2>w3-half</h2>
        <p>This is a paragraph.</p>
      </div>
    </div>
  </div>
  <div class="w3-half w3-container">
    <h2>w3-half</h2>
    <div class="w3-row">
      <div class="w3-half w3-container w3-red">
        <h2>w3-half</h2>
        <p>This is a paragraph.</p>
      </div>
      <div class="w3-half w3-container">
        <h2>w3-half</h2>
        <p>This is a paragraph.</p>
      </div>
    </div>
  </div>
</div>
尝试一下 »

列使用Rest(剩余)

I am 150px

I am the rest

Example using w3-rest

<div class="w3-row">
    <div class="w3-col" style="width:150px"><p>150px</p></div>
    <div class="w3-rest w3-green"><p>rest</p></div>
</div>
尝试一下 »

列使用百分比

20%

60%

20%

Example using percent

<div class="w3-row">
    <div class="w3-col" style="width:20%"><p>20%</p></div>
    <div class="w3-col" style="width:60%"><p>60%</p></div>
    <div class="w3-col" style="width:20%"><p>20%</p></div>
</div>
尝试一下 »

w3-content 类

w3-content 类用于为固定大小的中心内容定义一个容器:

Example

<body class="w3-content" style="max-width:500px">

  page content...

</body>
尝试一下 »

w3-row 与 w3-row-padding 的区别

w3-row 类定义了一个无填充容器,而 w3-row-padding 类则为每列定义左右为 8px 的填充:/p>

w3-row:

w3-row-padding:

Example

<div class="w3-row">
  <div class="w3-col s4"><img src="img_lights.jpg"></div>
  <div class="w3-col s4"><img src="img_nature.jpg"></div>
  <div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div>

<div class="w3-row-padding">
  <div class="w3-col s4"><img src="img_lights.jpg"></div>
  <div class="w3-col s4"><img src="img_nature.jpg"></div>
  <div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div>
尝试一下 »

12 列响应流式网格

W3.CSS 还支持流行的 12 列响应流式网格。

请调整页面大小看效果!

1
2
3
4
5
6
7
8
9
10
11
12

This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.

This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.

1
2
3
4
5
6
7
8
9
10
11
12

在后面的章节中,您将能了解更多的流式网格知识。