免费AI编程助手
W3.CSS Display (显示)
通过 display 类，您可以在其他 HTML 元素内的特定位置显示 HTML 元素：
实例
<div class="w3-display-topleft w3-padding"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">左上方</font></font></div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 显示类别
W3.CSS 提供以下 display 类：
| 类 | 定义 |
|---|---|
| w3-display-container
|
在 w3-display-container 中显示内容
|
| 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
|
将元素浮动到左侧（浮动：左侧） |
| w3-right | 将元素浮动到右侧（浮动：右侧） |
| w3-show | 显示一个元素（显示：块） |
| w3-hide
|
隐藏元素（显示：无） |
| w3-mobile
|
将移动优先响应性添加到任何元素。
在移动设备上将元素显示为块元素 |
与上面相同的示例，在其中添加了一些元素：
实例
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-padding w3-display-topmiddle">中间顶部</div>
<div class="w3-padding w3-display-bottommiddle">中间底部</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
在图像内显示文本：
显示悬停
w3-display-hover 悬停类显示 w3-display（从隐藏变为示出）。
w3-display-hover 悬停类可以结合 effect (效果) 和 animation (动画) 创建悬停效果：实例
<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">约翰·杜</button>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
在本教程的后面，您将了解有关动画和效果的更多信息。
显示标志
稍加想象，w3-display 类可用于创建标志：
实例
<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 类
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-display 中，如上例所示（自动清除浮点数）。
隐藏和显示
强制使用 w3-show 或 w3-hide 类显示或隐藏元素。
实例
<p class="w3-show">I am shown (display: block).</p>
<p class="w3-hide">I am hidden (display: none).</p>
尝试一下 »
点击“尝试一下”按钮查看在线实例
这些类通常用于在隐藏和显示元素之间切换：
实例
<script>
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
尝试一下 »
点击“尝试一下”按钮查看在线实例
w3-mobile 类
W3-mobile 类添加移动第一响应性的任何元件。
它将 display：block 和 width：100％ 添加到屏幕宽度小于 600px 的元素上。
更多建议：