html - 图片改变div位置

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 fiddle 来进行更多解释: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 将是一个将“锁定”其中每个 potition:absolute 的区域。

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