一旦我添加了img文件，框就会被图片向下推[重复]答案

【问题标题】：Once I add img file, box goes down by picture pushing down [duplicate]一旦我添加了img文件，框就会被图片向下推[重复]
【发布时间】：2016-04-06 06:13:02
【问题描述】：

当我通过 inline-block 组织相同大小的框时，它可以是响应式的。但是，当我组织不同大小的盒子时，它无法响应并且一旦我在 div 类中添加图像，甚至会按下框。你能帮我吗？

这里`CSS代码是

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

.clear {
    clear:both;
}

.colunm1 {
    width:340px;
    height:386px;
    border: 1px solid #000000;
    display:inline-block;

}  /*when sizes r different, place display:inline-block both*/

.colunm2 {
    width:340px;
    height:232px;
    border: 1px solid #000000;
    display:inline-block;
    position: relative;
    bottom:154px;
} 

.colunm3 {
    width:340px;
    height:600px;
    border: 1px solid #000000;
    float:right;
}

.colunm4 {
    width:340px;
    height:205px;
    border: 1px solid #000000;
}

.colunm4 {
    width:340px;
    height:218px;
    border: 1px solid #000000;
    display:inline-block;
    position:relative;
    bottom:153px;
}
/*colunm 4 and 5 have problem*/
.colunm5 {
    width:340px;
    height:363px;
    border: 1px solid #000000;
    display:inline-block;
    position: relative;
    bottom: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>

【问题讨论】：

标签： html css

【解决方案1】：

您需要将vertical-align: top 发送给：

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

【讨论】：