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>
