无法理解css的位置属性

align

关注

发信

关注(28)粉丝(399)

无法理解css的位置属性

本文介绍了无法理解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.

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的位置属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-28 14:41