如何使响应两个重叠的列

Question

大家好，你们可以帮助我创建一个我在Photoshop中设计的设计。我实际上使用col-md-6来使它成为两列。但问题是div高度比其他高一点。这是我正在谈论的图像

<div class="col-md-6" class="white">
     <h1>LOGISTIC</h1>
</div>
<div class="col-md-6" class="ship">   
</div>
<div class="col-md-6" class="black">
     <h1>DELIVERY</h1>
</div>
<div class="col-md-6" class="pipe">    
</div>
<div class="col-md-6" class="white">
     <h1>STORAGE</h1>
</div>
<div class="col-md-6" class="tank">
</div>

CSS

.ship{
background: url(../img/resources/ship.png);
}

.tank{
background: url(../img/resources/tank.png);
}

.pipe{
background: url(../img/resources/pipe.png);
}

请提前帮助我帮助我在这里存货

Answer 1

请务必在下面的所有课程中指定height：

.ship{
     height: /*set the height of ship.png*/
     background-image: url(../img/resources/ship.png);
}

.tank{
     height: /*set the height of tank.png*/
     background-image: url(../img/resources/tank.png);
}

.pipe{
     height: /*set the height of pipe.png*/
     background-image: url(../img/resources/pipe.png);
}