W3.CSS 布局
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
W3.CSS 布局类
| 班级 | 描述 |
|---|---|
| w3-单元格行 | 单元格（列）的容器。 |
| w3 细胞 | 布局单元格（列）。 |
| w3-单元格-顶部 | 将内容与单元格（列）的顶部对齐。 |
| w3-单元格-中间 | 将内容与单元格（列）的垂直中间对齐。 |
| w3-单元格底部 | 将内容与单元格（列）的底部对齐。 |
| w3-移动 | 为单元格（列）添加移动优先响应能力。 在移动设备上将元素显示为块元素。 |
HTML 块元素
最初，HTML 块元素（如<div>元素）显示为垂直块：
你好，W3.CSS 布局。
你好，W3.CSS 布局。
例子
<div class="w3-container w3-red">
<p>你好，W3.CSS 布局。</p>
</div>
<div class="w3-container w3-green">
<p>你好，W3.CSS 布局。</p>
</div>
布局单元格
这 w3 细胞 类重新定义块元素以水平显示（如表格单元格）：
你好，W3.CSS 布局。
你好，W3.CSS 布局。
例子
<div class="w3-container w3-red w3-cell">
<p>你好，W3.CSS 布局。</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>你好，W3.CSS 布局。</p>
</div>
布局容器
这 w3-单元格行 是单元格（列）的容器。
w3-cell-row 容器的宽度定义了所有包含的单元格的总宽度。
默认宽度为 100%：
你好，W3.CSS 布局。
你好，W3.CSS 布局。
例子
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>你好，W3.CSS 布局。</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>你好，W3.CSS 布局。</p>
</div>
</div>
如果更改单元格容器的宽度，它将减少所包含单元格的总宽度：
你好，W3.CSS 布局。
你好，W3.CSS 布局。
例子
<div class="w3-cell-row" style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>你好，W3.CSS 布局。</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>你好，W3.CSS 布局。</p>
</div>
</div>
布局单元格可自行调整
这 w3 细胞 类有一个非常好的内置自调整标准。并排元素将自动调整到必要的宽度：
你好，W3.CSS 布局。
你好，W3.CSS 布局。你好，W3.CSS 布局。
例子
<div class="w3-container w3-red w3-cell">
<p>你好，W3.CSS 布局。</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>你好，W3.CSS 布局。你好，W3.CSS 布局。</p>
</div>
布局单元格调整为相同高度
并排 w3 细胞 元素还将自动调整为相同高度：
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
例子
<div class="w3-container w3-red w3-cell">
<p>你好，W3.CSS 布局。</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>你好，W3.CSS 布局。</p>
<p>你好，W3.CSS 布局。</p>
<p>你好，W3.CSS 布局。</p>
<p>你好，W3.CSS 布局。</p>
</div>
响应式布局
这 w3-移动 该类为任何 HTML 元素添加了移动优先响应能力。
与w3-cell一起使用，将在小屏幕/手机上垂直显示布局列，在中/大屏幕上水平显示布局列。
在中型和大型屏幕上：
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
在小屏幕上：
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
例子
<div class="w3-container w3-red w3-cell w3-mobile">
<p>你好，W3.CSS 布局。</p>
</div>
<div class="w3-container w3-green w3-cell w3-mobile">
<p>你好，W3.CSS 布局。</p>
</div>
<div class="w3-container w3-blue w3-cell w3-mobile">
<p>你好，W3.CSS 布局。</p>
</div>
轻松对齐
这 w3 细胞 该类使得对齐文本变得非常容易。
有 3 种不同的对齐类别：
- w3-cell-top （默认）
- w3-单元格-中间
- w3-单元格底部
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
例子
<div class="w3-container w3-red w3-cell">
<p>你好，W3.CSS 布局。</p>
<p>你好，W3.CSS 布局。</p>
<p>你好，W3.CSS 布局。</p>
<p>你好，W3.CSS 布局。</p>
</div>
<div class="w3-container w3-green w3-cell w3-cell-middle">
<p>你好，W3.CSS 布局。</p>
</div>
<div class="w3-container w3-blue w3-cell w3-cell-bottom">
<p>你好，W3.CSS 布局。</p>
</div>
这 w3-单元格行 类会拉伸元素以适合页面宽度：
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
你好，W3.CSS 布局。
例子
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>你好，W3.CSS 布局。</p>
<p>你好，W3.CSS 布局。</p>
<p>你好，W3.CSS 布局。</p>
<p>你好，W3.CSS 布局。</p>
</div>
<div class="w3-container w3-green w3-cell w3-cell-middle">
<p>你好，W3.CSS 布局。</p>
</div>
<div class="w3-container w3-blue w3-cell w3-cell-bottom">
<p>你好，W3.CSS 布局。</p>
</div>
</div>
