无法理解css的位置属性 [英] Unable to understand position property of css
问题描述
如果 <p> 标签位置是绝对的，那么 div 会排成一行，但是在注释位置绝对之后 div 会向下，即使位置:相对.谁能告诉我为什么会这样?
*,*::前，*::后 {box-sizing: 边框框；}.main-content {背景:线性梯度(150deg，#be6180，#973f5c，#64293d)；宽度:100%；高度:200px；边界半径:0.5em；填充:25px；}.card-content {背景:线性梯度(150deg，#f3c83b，#dfa72e，#e24428)；宽度:100px；高度:100px；边界半径:0.5em；显示:内联块；右边距:25px；}p{/*位置:绝对；*/}<头><title>文档</title><身体><div class="main-content"><div class="card-content"><p>这是我的页面</p></div><div class="card-content"><p>这是我的页面</p></div><div class="card-content"></div></html>
要使元素居中，可以使用 vertical-align.
以下值可以解决您的问题:vertical-align: middle;, vertical-align:bottom;, vertical-align: top;, vertical-align: text-bottom;, vertical-align: text-top;,
这是代码(我在您的 card-content 中添加了 vertical-align: middle):
*,*::前，*::后 {box-sizing: 边框框；}.main-content {背景:线性梯度(150deg，#be6180，#973f5c，#64293d)；宽度:100%；高度:200px；边界半径:0.5em；填充:25px；}.card-content {背景:线性梯度(150deg，#f3c83b，#dfa72e，#e24428)；宽度:100px；高度:100px；边界半径:0.5em；显示:内联块；右边距:25px；垂直对齐:中间；/* 也可能:底部、顶部、文本底部和文本顶部 */}p{/*位置:绝对；*/}<头><title>文档</title><身体><div class="main-content"><div class="card-content"><p>这是我的页面</p></div><div class="card-content"><p>这是我的页面</p></div><div class="card-content"></div></html>
If <p> tag position is absolute then div comes in a row but after commenting position absolute then div comes downward even if position:relative. Could anyone tell me why this is happening?
*,
*::before,
*::after {
box-sizing: border-box;
}
.main-content {
background: linear-gradient(150deg, #be6180, #973f5c, #64293d);
width: 100%;
height: 200px;
border-radius: 0.5em;
padding: 25px;
}
.card-content {
background: linear-gradient(150deg, #f3c83b, #dfa72e, #e24428);
width: 100px;
height: 100px;
border-radius: 0.5em;
display: inline-block;
margin-right: 25px;
}
p {
/*position: absolute;*/
}
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="main-content">
<div class="card-content"><p>This is my page</p></div>
<div class="card-content"><p>This is my page</p></div>
<div class="card-content"></div>
</div>
</body>
</html>
To center the elements, you can use vertical-align.
The following values are possible to fix your Problem:
vertical-align: middle;,vertical-align: bottom;,vertical-align: top;,vertical-align: text-bottom;,vertical-align: text-top;,
Here's the code (I added vertical-align: middle to your card-content):
*,
*::before,
*::after {
box-sizing: border-box;
}
.main-content {
background: linear-gradient(150deg, #be6180, #973f5c, #64293d);
width: 100%;
height: 200px;
border-radius: 0.5em;
padding: 25px;
}
.card-content {
background: linear-gradient(150deg, #f3c83b, #dfa72e, #e24428);
width: 100px;
height: 100px;
border-radius: 0.5em;
display: inline-block;
margin-right: 25px;
vertical-align: middle; /* Also possible: Bottom, top, text-bottom and text-top */
}
p {
/*position: absolute;*/
}
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="main-content">
<div class="card-content"><p>This is my page</p></div>
<div class="card-content"><p>This is my page</p></div>
<div class="card-content"></div>
</div>
</body>
</html>
这篇关于无法理解css的位置属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
