如何水平对齐3 div和中间div的一个div底部

Question

如何使用css对齐下图所示的4个div

我使用了这段代码

<div class="row">
                <div class="col-md-4" style="height: 100px;background: #D78889;margin: 2px"></div> 
                <div class="col-md-4" style="height: 100px;background: #D78AA9;margin: 2px"></div> 
                <div class="col-md-4" style="height: 100px;background: #3D2B11;margin: 2px"></div> 
            </div>
              <div class="row">
                <div class="col-md-4" ></div> 
                <div class="col-md-4" style="height: 100px;background: #D78AA9;margin: 2px"></div> 
                <div class="col-md-4" ></div> 
            </div>

但是我认为这不是一个好主意

Answer 1

尝试一下：

<div class="row">
    <div class="col-md-4" style="height: 100px;background: #D78889;margin: 2px">Left</div> 
    <div class="col-md-4" style="height: 100px;background: #D78AA9;margin: 2px">Center</div> 
    <div class="col-md-4" style="height: 100px;background: #3D2B11;margin: 2px">Right</div> 
</div>
<div class="row">
    <div class="col-md-4 offset-md-4" style="height: 100px;background: #D78AA9;margin: 2px">aligned underneath the centered div above me!</div>
</div>

希望我进一步推动了你。

Answer 2

这应该很有用。

.row {
  height: 300px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-12 col-md-4 bg-primary"></div>
  <div class="col-12 col-md-4 bg-danger"></div>
  <div class="col-12 col-md-4 bg-success"></div>
  <div class="col-12 col-md-4 bg-warning offset-md-4"></div>
</div>