W3.CSS Display
display 類允許你在其他 HTML 元素內部以特定位置顯示 HTML 元素
左上角
右上角
左下角
右下角
Left
Right
中間
W3.CSS Display Classes
W3.CSS 提供以下 display 類:
| 類 | 定義 |
|---|---|
| w3-display-container | w3-display-classes 的容器 |
| w3-display-topleft | 在 w3-display-container 的左上角顯示內容 |
| w3-display-topright | 在 w3-display-container 的右上角顯示內容 |
| w3-display-bottomleft | 在 w3-display-container 的左下角顯示內容 |
| w3-display-bottomright | 在 w3-display-container 的右下角顯示內容 |
| w3-display-left | 在 w3-display-container 的左側（中間左側）顯示內容 |
| w3-display-right | 在 w3-display-container 的右側（中間右側）顯示內容 |
| w3-display-middle | 在 w3-display-container 的中間（中心）顯示內容 |
| w3-display-topmiddle | 在 w3-display-container 的頂部中間顯示內容 |
| w3-display-bottommiddle | 在 w3-display-container 的底部中間顯示內容 |
| w3-display-position | 在 w3-display-container 的指定位置顯示內容 |
| w3-display-hover | 在 w3-display-container 內懸停時顯示內容 |
| w3-left | 將元素浮動到左側 (float: left) |
| w3-right | 將元素浮動到右側 (float: right) |
| w3-show | 顯示元素 (display: block) |
| w3-hide | 隱藏元素 (display: none) |
| w3-mobile | 為任何元素新增移動優先的響應式設計。 在移動裝置上將元素顯示為塊級元素 |
示例
示例
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-display-topleft">左上角</div>
<div class="w3-display-topright">右上角</div>
<div class="w3-display-bottomleft">左下角</div>
<div class="w3-display-bottomright">右下角</div>
<div class="w3-display-left">左側</div>
<div class="w3-display-right">右側</div>
<div class="w3-display-middle">中間</div>
<div class="w3-display-topmiddle">頂部中間</div>
<div class="w3-display-bottommiddle">底部中間</div>
</div>
自己試試 »
與上面示例相同，但增加了內邊距
左上角
右上角
左下角
右下角
Left
Right
中間
示例
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-padding w3-display-topleft">左上角</div>
<div class="w3-padding w3-display-topright">右上角</div>
<div class="w3-padding w3-display-bottomleft">左下角</div>
<div class="w3-padding w3-display-bottomright">右下角</div>
<div class="w3-padding w3-display-left">左側</div>
<div class="w3-padding w3-display-right">右側</div>
<div class="w3-padding w3-display-middle">中間</div>
<div class="w3-padding w3-display-topmiddle">頂部中間</div>
<div class="w3-padding w3-display-bottommiddle">底部中間</div>
</div>
自己試試 »
在圖片中顯示文字
左上角
右上角
左下角
右下角
頂部中間
Left
Right
中間
底部中間
示例
<div class="w3-display-container">
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<div class="w3-padding w3-display-topleft">左上角</div>
<div class="w3-padding w3-display-topright">右上角</div>
<div class="w3-padding w3-display-bottomleft">左下角</div>
<div class="w3-padding w3-display-bottomright">右下角</div>
<div class="w3-padding w3-display-topmiddle">頂部中間</div>
<div class="w3-padding w3-display-left">左側</div>
<div class="w3-padding w3-display-right">右側</div>
<div class="w3-padding w3-display-middle">中間</div>
<div class="w3-padding w3-display-bottommiddle">底部中間</div>
</div>
自己試試 »
Display Hover
w3-display-hover 類在 w3-display-container 內懸停時顯示內容（從隱藏變為顯示）。
左上角
右上角
左下角
右下角
Left
Right
將滑鼠懸停在此框上！
頂部中間
底部中間
示例
<div class="w3-display-container w3-light-grey" style="height:300px;">
<div class="w3-display-topleft w3-display-hover">左上角</div>
<div class="w3-display-topright w3-display-hover">右上角</div>
<div class="w3-display-bottomleft w3-display-hover">左下角</div>
<div class="w3-display-bottomright w3-display-hover">右下角</div>
<div class="w3-display-left w3-display-hover">左側</div>
<div class="w3-display-right w3-display-hover">右側</div>
<div class="w3-display-middle">將滑鼠懸停在此框上！</div>
<div class="w3-display-topmiddle w3-display-hover">頂部中間</div>
<div class="w3-display-bottommiddle w3-display-hover">底部中間</div>
</div>
自己試試 »
w3-display-hover 類可以與 effect 和 animation 類結合使用，以建立酷炫的懸停效果
卡其色褲子，19.99 美元
示例
<div class="w3-display-container w3-hover-opacity">
<img src="img_avatar.png" alt="Avatar">
<div class="w3-display-middle w3-display-hover">
<button class="w3-button w3-black">John Doe</button>
</div>
</div>
自己試試 »
你將在本教程的後面學習更多關於動畫和效果的內容。
顯示國旗
稍加想象，w3-display-classes 就可以用來建立一面國旗
示例
<div class="w3-display-container w3-card-4" style="height:200px;width:350px">
<div class="w3-red w3-display-topleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-topright" style="width:60%;height:40%"></div>
<div class="w3-red w3-display-bottomleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-bottomright" style="width:60%;height:40%"></div>
</div>
自己試試 »
Floating Classes
w3-left 類將元素浮動到左側，w3-right 類將元素浮動到右側
w3-left
w3-right
示例
<div class="w3-bar w3-light-grey">
<div class="w3-left w3-red">w3-left</div>
<div class="w3-right w3-blue">w3-right</div>
</div>
自己試試 »
注意：使用 w3-clear 類清除浮動，或將它們放在 w3-container 內，如上例所示（自動清除浮動）。
隱藏和顯示
使用 w3-show 或 w3-hide 類強制顯示或隱藏元素。
這些類通常用於切換顯示和隱藏元素
w3-mobile 類
w3-mobile 類為任何元素新增移動優先的響應式設計。
它在螢幕寬度小於 600px 時，為元素新增 display:block 和 width:100%。
