Html 一旦我添加了img文件，按下图片框就会向下移动

当我通过内联块组织相同大小的框时，它可以响应。 然而，当我组织不同大小的盒子时，它无法响应和响应 甚至当我在div类中添加图像时，也会按下框。你能帮我吗

这里是CSS代码

.box{
宽度：30%；
高度：160px；
边框：1px实心#000000；
显示：内联块；
}
.清楚{
明确：两者皆有；
}
colunm1先生{
宽度：340px；
高度：386px；
边框：1px实心#000000；
显示：内联块；
}/*当大小r不同时，放置显示：内联块*/
.colunm2{
宽度：340px；
高度：232px；
边框：1px实心#000000；
显示：内联块；
位置：相对位置；
底部：154px；
} 
.colunm3{
宽度：340px；
高度：600px；
边框：1px实心#000000；
浮动：对；
}
.colunm4{
宽度：340px；
身高：205px；
边框：1px实心#000000；
}
.colunm4{
宽度：340px；
高度：218px；
边框：1px实心#000000；
显示：内联块；
位置：相对位置；
底部：153px；
}
/*colunm 4和5有问题*/
.colunm5{
宽度：340px；
身高：363px；
边框：1px实心#000000；
显示：内联块；
位置：相对位置；
底部：155px；
}

HTML代码是

<div class="box">
</div>

<div class="box">
</div>


<div class="colunm1">
<img src="">    
</div>

<div class="colunm2">
    <img src="">
</div>

<div class="colunm3">
    <img src="">
</div>

<div class="colunm4">
    <img src="">
</div>

<div class="colunm5">
    <img src="">
</div>

---

您需要将

垂直对齐：顶部

指定给：

.box {
    width: 30%;
    height: 160px;
    border: 1px solid #000000;
    display: inline-block;
    vertical-align: top;
}