W3.CSS 布局
您好，W3.CSS 布局。
您好，W3.CSS 布局。
您好，W3.CSS 布局。
您好，W3.CSS 布局。
您好，W3.CSS 布局。
您好，W3.CSS 布局。
W3.CSS 布局类
| 类 | 描述 |
|---|---|
| w3-cell-row | 单元格（列）的容器。 |
| w3-cell | 布局单元格（列）。 |
| w3-cell-top | 将内容对齐到单元格（列）的顶部。 |
| w3-cell-middle | 将内容对齐到单元格（列）的垂直中线。 |
| w3-cell-bottom | 将内容对齐到单元格（列）的底部。 |
| w3-mobile | 向单元格（列）添加移动优先响应式。 在移动设备上将元素显示为块级元素。 |
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-cell 类重新定义了块级元素以水平显示（类似表格单元格）
您好，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-cell-row 是单元格（列）的容器。
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-cell 类有一个非常棒的内置自动调整标准。并排元素将自动调整到必要的宽度
您好，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-cell 元素也将自动调整到相等的高度
您好，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-mobile 类为任何 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-cell 类使得对齐文本变得非常容易。
有 3 种不同的对齐类
- w3-cell-top（默认）
- w3-cell-middle
- w3-cell-bottom
您好，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-cell-row 类会拉伸元素以适应页面宽度
您好，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>
