gpt4 book ai didi

html - 内联div不显示

转载 作者:太空宇宙 更新时间:2023-11-03 21:14:23 26 4
gpt4 key购买 nike

我觉得我要问一些愚蠢的问题,但无论如何,这里是:我无法在 chrome 或 safari 中显示内联 div。这是我的 html 文档:

<!doctype html>
<html>
<head>
</head>
<body>
<div style="display: inline; background-color: red; width: 100px; height: 100px;"></div>
<div style="display: inline; background-color: bisque; width: 100px; height: 100px;"></div>
<div style="display: inline; background-color: aliceblue; width: 100px; height: 100px;"></div>
<div style="display: inline-block; background-color: black; width: 100px; height: 100px;"></div>
<div style="display: inline; background-color: aqua; width: 100px; height: 100px;"></div>
</body>
</html>

唯一显示的 div 是显示设置为“inline-block”的那个。我没有什么特别想要实现的,我只是想了解为什么“内联”div 没有出现,以加深我对 HTML 的理解。据我在网上看到的,其他人似乎在使用内联 div!

最佳答案

来自 the spec :

'height' Applies to: all elements but non-replaced inline elements, table columns, and column groups

width Applies to: all elements but non-replaced inline elements, table rows, and row groups

由于您设置了 display: inline,因此 div 元素是不可替换的内联元素,并且不会从这些属性中获取任何大小。

那些 div 没有任何内容,因此它们也不会从内容中获取任何大小。

因此它们不占用空间,也没有任何东西可以显示背景。

关于html - 内联div不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43592564/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com