CSS不均匀div定位

Question

我要根据图片定位div：

到目前为止，我通过使用Bootstrap的row类并在CSS中使用z-index取得了成功。但是，当我调整浏览器的大小时，它没有响应，它只是浮​​在页面右侧。顺便说一句，我正在使用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>

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>

Answer 2

您需要利用列内的嵌套行。参见此处-Bootstrap Nesting。此处忽略代码段样式的CSS，而高度则用于忽略内容。

.B {
  min-height: 130px;
  background: #393276;
  margin-bottom: 20px;
}

.A {
  min-height: 100px;
  margin-bottom: 20px;
  background: #393276;
}

.C {
  min-height: 250px;
  background: #393276;
}

div {
  text-align: center;
  color: #fff;
  font-size: 32px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<div class="container mt-4">
  <div class="row">
  
    <!-- First Column -->
    <div class="col-sm-6">

      <!--Rows nested inside a column-->
      <div class="row">
        <div class="col-12">
          <div class="A">A</div>
        </div>
      </div>

      <div class="row">
        <div class="col-12">
          <div class="B">B</div>
        </div>
      </div>
    </div>
    
    <!-- Second Column -->

    <div class="col-sm-6">
      <div class="C">C</div>
    </div>
  </div>
</div>