html - 如何水平对齐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>

希望我能进一步插入你。