Question

我正在尝试将两个列分隔为圆形页面或在圆形页面内部，第二列应该具有如下图像：

<div class="step second">
  <div id="upload-img"></div>
  <div id="sperator">
    <div class="circle" id="or"><p class="number" style="padding-left:25%;">or</div>
  </div>
  <div id="default-img">
    <img src=""/>
  </div>
</div>

但由于某种原因，#sperator div的位置随着图像的变化而变化，因为我的css有点长，所以这里有一个js小提琴，可以解释更多：here

正如您所看到的那样，图像应该与另一个div在同一行，但它会改变分隔符div的位置

Answer 1

您应该重新检查您的html标签。确保每个标签正确关闭

这是你的css：

.step{
    position:relative;
    width:500px;
    height:250px;
    border:1px solid black;
}
#upload-img{
    position:absolute;
    left:0;
    top:0;
    width:50%;
    height:100%
}

#default-img{
    position:absolute;
    right:0;
    top:0;
    width:50%;
    height:100%
    }
#upload-img img, #default-img img{
    max-width:100%;
    max-height:100%;    
}

#sperator .circle{
    position:absolute;
    height:66px;
    width:66px;
    background-color:black;
    top:50%;
    left:50%;
    margin:-33px auto auto -33px;
    border-radius:50%;
    z-index:100;
    text-align:center;
}
#sperator .circle p{
  font-size:35px;
  font-family:futura-book;
  color:white;    
  padding:0 !important;
  margin:0;
  line-height:60px;
}
.step::after{
    content:'';
    height:100%;
    width:3px;
    left:50%;
    margin-left:-2px;    
    z-index:90;
    position:absolute;
    background-color:black;
}

potition:relative将是一个将锁定＆＃34;其中每potition:absolute个。

您可以将position:relative用作父div和position:absolute作为子div。

图像改变div位置

1 个答案: