免費(fèi)AI編程助手
W3.CSS Layout (布局)
實(shí)例
<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">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
W3.CSS Layout 類
W3.CSS 在版本 2.90 / 2.91 為“l(fā)ayout”布局引入了以下類：
| 類 | 描述 |
|---|---|
| w3-cell-row
|
單元格（列）的容器。 |
| w3-cell
|
布局單元格（列）。 |
| w3-cell-top
|
在單元格（列）頂部對(duì)齊內(nèi)容。 |
| w3-cell-middle
|
在單元格（列）的垂直中間對(duì)齊內(nèi)容。 |
| w3-cell-bottom
|
在單元格（列）底部對(duì)齊內(nèi)容。 |
| w3-mobile
|
向單元格（列）添加移動(dòng)優(yōu)先響應(yīng)。
在移動(dòng)設(shè)備上將元素顯示為塊元素。 |
提示： 布局類替換不推薦使用舊版布局類。
新的布局分類器更加通用，更易于使用。
此頁面底部列出了不推薦使用的布局類。
HTML 塊元素
最初，HTML塊元素（如<div>元素）顯示為垂直塊：
實(shí)例
<div class="w3-container w3-red">
<p>您好W3.CSS布局。</p>
</div>
<div class="w3-container w3-green">
<p>您好W3.CSS布局。</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
單元格布局
w3-cell 類重新定義塊元件以水平顯示（表格單元格）：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
容器布局
w3-cell-row 類為表格（列）的容器。
w3-cell-row 容器的寬度定義了所有包含的單元格的總寬度。
默認(rèn)寬度為100％：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
如果更改單元格容器的寬度，它將減小所包含單元格的總寬度：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
布局單元格可以自我調(diào)整
w3-cell 類具有內(nèi)置自調(diào)整標(biāo)準(zhǔn)非常漂亮。并排元素將自動(dòng)調(diào)整為必要的寬度：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
為布局單元格調(diào)整相等的高度
并排的 w3-cell 元素還將自動(dòng)自我調(diào)整為相等的高度：
您好W3.CSS布局。
您好W3.CSS布局。
您好W3.CSS布局。
您好W3.CSS布局。
您好W3.CSS布局。
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
響應(yīng)式布局
w3-mobile 類添加移動(dòng)第一響應(yīng)性的任何 HTML 元素。
與 w3-cell 一起使用時(shí)，它將在小屏幕/手機(jī)上垂直顯示布局列，在中/大屏幕上水平顯示。
在中/大屏幕上:
在小屏幕上:
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
容易對(duì)齊
w3-cell 類使得它很容易對(duì)齊文本。
共有3種不同的對(duì)齊方式類：
- w3-cell-top (default)
- w3-cell-middle
- w3-cell-bottom
您好W3.CSS布局。
您好W3.CSS布局。
您好W3.CSS布局。
您好W3.CSS布局。
您好W3.CSS布局。
您好W3.CSS布局。
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
不推薦使用的W3.CSS表格布局類
| w3-layout-container | 請(qǐng)改用 w3-cell-row。 |
| w3-layout-row
|
|
| w3-layout-cell
|
請(qǐng)改用 w3-cell。 |
| w3-layout-top
|
請(qǐng)改用 w3-cell-top。 |
| w3-layout-middle
|
請(qǐng)改用 w3-cell-middle。 |
| w3-layout-bottom
|
請(qǐng)改用 w3-cell-bottom。 |
| w3-layout-col
|
請(qǐng)改用 w3-mobile。 |
提示： 不推薦使用的類將從4.0版的W3.CSS中刪除。
更多建議：