gpt4 book ai didi

html - 在问题中显示内联 block 文本

转载 作者:太空宇宙 更新时间:2023-11-03 19:44:53 28 4
gpt4 key购买 nike

我一直在尝试显示内联 block ,如果我没有向 div 添加任何东西,一切都会很好,但是当我这样做时,div 会折叠,我不知道为什么。

有什么想法吗?

https://jsfiddle.net/giancorzo/ebqoptbd/

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8 cajas</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="caja"></div>
<div class="caja-grande">
<div class="caja inline-block">
<span>Hola mundo</span>
</div>
<div class="caja inline-block">
</div>
<div class="caja inline-block">
CSS: </div>
</div>
<div class="caja inline-block"></div>
<div class="caja inline-block"></div>
<div class="caja"></div>
</body>
</html>

CSS:

.caja{
background-color: gray;
width: 100px;
height: 100px;
border: 1px solid black;
margin: 5px;
}

.inline-block{
display: inline-block;
}

.caja-grande{
background-color: gray;
border: 1px solid black;
padding: 5px;
width: 350px;
margin: 5px;
}

最佳答案

问题是由于内联元素的默认垂直对齐方式——baseline,元素内的文本会影响它并将 div 推到底部。例如,使用 vertical-align: top 来抑制这种行为。

JSFiddle

关于html - 在问题中显示内联 block 文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31417976/

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