W3.CSS 布局
W3.CSS 布局类
W3.CSS 版本 2.90 / 2.91 引入了以下用于 "column-like" 布局的类:
| 类 | 描述 |
|---|---|
| w3-cell-row | 单元格（列）的容器。 |
| w3-cell | 布局单元格（列）。 |
| w3-cell-top | 对齐单元格（列）顶部的内容。 |
| w3-cell-middle | 在单元格（列）的垂直中间对齐内容。 |
| w3-cell-bottom | 对齐单元格（列）底部的内容。 |
| w3-mobile | 向单元格（列）添加移动优先响应。 在移动设备上将元素显示为块元素。 |
布局类替换了已弃用的布局类。
新的布局分类器更加通用且更易于使用。
本页底部列出了已弃用的布局类。
HTML 块元素
最初，HTML 块元素（如 <div> 元素）显示为垂直块:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
实例
<div class="w3-container w3-red">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
布局单元格
w3-cell 类重新定义块元素以水平显示（如表格单元格）:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
实例
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
布局容器
w3-cell-row 是单元格（列）的容器。
w3-cell-row 容器的宽度定义了所有包含的单元格的总宽度。
默认宽度为100%:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
实例
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
如果改变单元格容器的宽度，它会减少所包含单元格的总宽度:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
实例
<div class="w3-cell-row"
style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
布局单元格是自调整的
w3-cell 类有一个非常好的内置自调整标准。 并排元素会自动调整到必要的宽度:
Hello W3.CSS Layout.
Hello W3.CSS Layout. Hello W3.CSS Layout.
实例
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
布局单元格调整为等高
并排的 w3-cell 元素也会自动调整到相同的高度:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
实例
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
响应式布局
w3-mobile 类为任何 HTML 元素添加了移动优先响应。
与 w3-cell 一起使用，它将在小屏幕/手机上垂直显示布局列，在中/大屏幕上水平显示布局列。
在中型和大型屏幕上:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
在小屏幕上:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
实例
<div class="w3-container w3-red
w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div
class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello
W3.CSS Layout.</p>
</div>
易于对齐
w3-cell 类使对齐文本变得非常容易。
有 3 种不同的对齐方式:
- w3-cell-top（默认）
- w3-cell-middle
- w3-cell-bottom
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
实例
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
w3-cell-row 类拉伸元素以适应页面宽度:
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
Hello W3.CSS Layout.
实例
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
弃用的 W3.CSS 表格布局类
| w3-layout-container | 改用 w3-cell-row |
| w3-layout-row | |
| w3-layout-cell | 改用 w3-cell |
| w3-layout-top | 改用 w3-cell-top |
| w3-layout-middle | 改用 w3-cell-middle |
| w3-layout-bottom | 改用 w3-cell-bottom |
| w3-layout-col | 改用 w3-mobile |
弃用类将从 4.0 版的 W3.CSS 中删除。
