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>
