内部问题的CSS显示内嵌文本块 [英] css display inline block text inside issue
本文介绍了内部问题的CSS显示内嵌文本块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我一直在尝试显示内联块,一切工作巨大的,如果我没加任何东西到div的,但是当我这样做的股利崩溃,我不知道为什么。
你知道吗?
https://jsfiddle.net/giancorzo/ebqoptbd/
HTML:
<!DOCTYPE HTML>
< HTML>
< HEAD>
<元的charset =UTF-8>
<冠军> 8储蓄银行< /标题>
<链接相对=样式类型=文/ CSS的href =的main.css>
< /头>
<身体GT;
< DIV CLASS =卡哈>< / DIV>
< DIV CLASS =卡哈 - 格兰德>
< DIV CLASS =卡哈inline-block的>
<跨度> HOLA的世界报< / SPAN>
< / DIV>
< DIV CLASS =卡哈inline-block的>
< / DIV>
< DIV CLASS =卡哈inline-block的>
CSS:< / DIV>
< / DIV>
< DIV CLASS =卡哈inline-block的>< / DIV>
< DIV CLASS =卡哈inline-block的>< / DIV>
< DIV CLASS =卡哈>< / DIV>
< /身体GT;
< / HTML>
CSS:
.caja {
背景颜色:灰色;
宽度:100像素;
高度:100像素;
边界:1px的纯黑色;
保证金:5像素;
}
.inline块{
显示:inline-block的;
}
.caja - 格兰德{
背景颜色:灰色;
边界:1px的纯黑色;
填充:5px的;
宽度:350像素;
保证金:5像素;
}
解决方案
这个问题是由于默认内联元素的垂直对齐方式 - 基线
,里面的元素中的文本会影响它并推动DIV底部。使用垂直对齐:顶部
,例如,晚饭preSS这种行为
I have been trying out display inline-block, everything worked out great if I didn't add anything into the divs but when I do the div collapsed and I don't know exactly why.
Any idea?
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;
}
解决方案
The issue is due to default vertical alignment of inline elements – baseline
, the text inside element affects it and pushes div to the bottom. Use vertical-align: top
, for example, to suppress this behavior.
这篇关于内部问题的CSS显示内嵌文本块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文