如何在上下对齐div？

Question

下面是两个div，下面还有两个div。我想将它们分层，以便它们在下面完美对齐。

＆＃13;

＆＃13;

let randomDelay = arc4random_uniform(3)
DispatchQueue.main.asyncAfter(deadline: .now() + Double(randomDelay)) {
}

＆＃13;

.box {
  display: flex;
}

.left {
  flex: 1;  /* grow */
  border: 1px dashed #f0f;
}

.right {
  flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
  border: 1px dashed #00f;
}

.leftTop {
  position: absolute;
  /* what to do here? */
}
  
.rightTop {
  position: absolute;
  /* what to do here? */
}

＆＃13;

＆＃13;

＆＃13;

当我复制左上角和右上角时，我对顶层没有同样的效果。

Answer 1

如何为leftTop div设置宽度：100％？

.leftTop {
  background-color: lightblue;
  width:100%;
}

代码链接： https://jsfiddle.net/31rqsn93/12/

Answer 2

我建议添加relative定位包装器，其中包含顶部和底部div，并将top层absolute放置在包装器中。

所以你会：

box
  left
    bottom
    top
  right
    bottom
    top

这是一个片段：

＆＃13;

＆＃13;

div {
    box-sizing: border-box;
}

.box {
    display: flex;
}

.left, .right {
    position: relative;
}

.left {
    flex: 1;
}

.right {
    flex: 0 0 250px;
}

.bottom {
    height: 100%;
}
  
.top {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}


/* These are just for illustration purposes */

.left, .right {
    border: 3px solid green;
}

.top, .bottom {
    border: 3px dashed;
}

.bottom {
    border-color: red;
    background: rgba(255, 0, 0, 0.3);
}
  
.top {
    border-color: blue;
    background: rgba(0, 0, 255, 0.3);
}

＆＃13;

<div class="box">
    <div class="left">
        <div class="bottom">
            Left<br>top<br>layer<br><br>These still align
        </div>

        <div class="top">
            Left<br>bottom<br>layer
        </div>
    </div>

    <div class="right">
        <div class="bottom">
            Right<br>top<br>layer
        </div>

        <div class="top">
            Right<br>bottom<br>layer
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;