W3.CSS 布局

你好，W3.CSS 布局。

W3.CSS 布局类

类	描述
w3 单元格行	单元格（列）的容器。
w3单元格	布局单元格（列）。
w3-单元格顶部	将内容对齐到单元格（列）的顶部。
w3-单元格-中间	将内容在单元格（列）的垂直中间对齐。
w3-单元格底部	对齐单元格（列）底部的内容。
w3-移动	向单元格（列）添加移动优先响应能力。在移动设备上将元素显示为块元素。

HTML 块元素

最初，HTML 块元素（如 <div> 元素）显示为垂直块：

你好，W3.CSS 布局。

示例

<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单元格类重新定义块元素以水平显示（如表格单元格）：

你好，W3.CSS 布局。

示例

<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 单元格行是单元格（列）的容器。

w3-cell-row 容器的宽度定义了所有包含的单元格的总宽度。

默认宽度为 100%：

你好，W3.CSS 布局。

示例

<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>

亲自试一试»

如果更改单元格容器的宽度，它将减少所包含单元格的总宽度：

你好，W3.CSS 布局。

示例

<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单元格类有一个非常好的内置自我调整标准。并排元素将自动调整到必要的宽度：

你好，W3.CSS 布局。

你好，W3.CSS 布局。你好，W3.CSS 布局。

示例

<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单元格元素也会自动自我调整到相同的高度：

你好，W3.CSS 布局。

示例

<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-移动class 为任何 HTML 元素添加了移动优先响应能力。

与w3-cell一起使用，可以在小屏幕/手机上垂直显示布局列，在中/大屏幕上水平显示布局列。

在中型和大屏幕上：

你好，W3.CSS 布局。

在小屏幕上：

你好，W3.CSS 布局。

示例

<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单元格类使得对齐文本变得非常容易。

有 3 种不同的对齐类别：

w3-cell-top（默认）
w3-单元格-中间
w3-单元格底部

你好，W3.CSS 布局。

示例

<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 单元格行类拉伸元素以适应页面宽度：

你好，W3.CSS 布局。

示例

<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>

亲自试一试»