免费AI编程助手
W3.CSS Layout (布局)
实例
<div class="w3-container w3-black w3-cell">
<div class="w3-container w3-dark-grey w3-cell w3-cell-middle">
<div class="w3-container w3-blue-grey w3-cell w3-cell-bottom">
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS Layout 类
W3.CSS 在版本 2.90 / 2.91 为“layout”布局引入了以下类：
| 类 | 描述 |
|---|---|
| w3-cell-row
|
单元格（列）的容器。 |
| w3-cell
|
布局单元格（列）。 |
| w3-cell-top
|
在单元格（列）顶部对齐内容。 |
| w3-cell-middle
|
在单元格（列）的垂直中间对齐内容。 |
| w3-cell-bottom
|
在单元格（列）底部对齐内容。 |
| w3-mobile
|
向单元格（列）添加移动优先响应。
在移动设备上将元素显示为块元素。 |
提示： 布局类替换不推荐使用旧版布局类。
新的布局分类器更加通用，更易于使用。
此页面底部列出了不推荐使用的布局类。
HTML 块元素
最初，HTML块元素（如<div>元素）显示为垂直块：
实例
<div class="w3-container w3-red">
<p>您好W3.CSS布局。</p>
</div>
<div class="w3-container w3-green">
<p>您好W3.CSS布局。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
单元格布局
w3-cell 类重新定义块元件以水平显示（表格单元格）：
实例
<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％：
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
如果更改单元格容器的宽度，它将减小所包含单元格的总宽度：
实例
<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 类具有内置自调整标准非常漂亮。并排元素将自动调整为必要的宽度：
实例
<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 一起使用时，它将在小屏幕/手机上垂直显示布局列，在中/大屏幕上水平显示。
在中/大屏幕上:
在小屏幕上:
实例
<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 (default)
- w3-cell-middle
- w3-cell-bottom
您好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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
不推荐使用的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中删除。
更多建议：