css - 如何使两个重叠的列响应

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

确保在下面的所有类中指定高度:

.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);
}