html - 如何水平对齐 3 个 div 和中间 div 的 1 个 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>