html - CSS 不均匀 div 定位

Question

我想根据图片定位一个div：

到目前为止，通过使用 Bootstrap 的row类并z-index在我的 CSS 中使用，我取得了成功。但是当我调整浏览器的大小时，它没有响应，它只是漂浮在页面的右侧。顺便说一句，我正在使用position: absolute（我在网上看到我必须使用它才能使用z-index）。有没有其他更优雅的方式来做到这一点？我希望它具有响应性，但似乎找不到任何其他解决方法，而不是我实施的不稳定的解决方法。

代码：

#div2 {
  float: inherit;
  position: absolute;
  top: inherit;
  left: 60%;
  width: 320px;
  height: 1290px;
  z-index: 5;
}

<div class="container">
  <div class="div-container">
    <div class="row">
      <div id="div1">
        <p>Div 1</p>
      </div>
      <div id="div2" align='center'>
        <p>Div 2</p>
      </div>
    </div>
    <div class="row">
      <div id="div3">
        <p>Div 3</p>
      </div>
    </div>
  </div>
</div>

标签： htmlcsstwitter-bootstrap

Answer 1

我使用flexbox来保持响应式设计和一些边距定位以保持阵型在一起。

.container{
  display: flex;
  flex-wrap: wrap;
  width: 150px;
}
.div1, .div3{
  margin-right: 5px;
  width: 50px;
  height: 50px;
}
.div2{
  margin-right: 5px;
  width: 50px;
  height: 110px;
}

<div class="container">
<div class="div1"> div1 </div>
<div class="div2"> div2 </div>
  <br/>
<div class="div3" style="margin-top: -55px;"> div 3 </div>
</div>