瀑布流加载过程中图片上移占据图片标题问题求解

Question

最近弄一个瀑布流，每次图片加载过程中，当一些特别长的图片加载时，总会有几张长图片刚加载出来时会上移占据上面图片的标题位置，但是，当继续下来，等下一页加载出来时，它又回到了正常位置，请问我该怎么办？瀑布流部分代码如下：

<div class="grid-item">
<div class="broke-product">
<div class="pro-inner">
<div class="broke-img">
<a href="/">
<img src="1.jpg">
</a>
</div>
<div class="broke-info">
<h4>标题标题</h4>
</div></div></div></div></div>

// 以下为瀑布流css
<style>

.grid-item {
  float: left;
  width: 49.4%;
  background: #f5f5f5;
  height:auto;
}
.broke-product{width:100%;
    background:#f5f5f5;margin-bottom:4px;
    float: left; 
    text-align:left;
    display:inline-block; 
        align-items: stretch;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.pro-inner{overflow:hidden;
    background-color: #fff;
    border-radius:5px;
    width:98%;margin-bottom:6px;
    break-inside:avoid;display:block; 
    -moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    box-shadow: 0px 0px 1px 0px #e5e3e3;
}
.broke-img{
    background:#f6f6f6; 
    text-align:center;
    margin:0 -25px;max-width:200px;
}
.broke-img{
    background:#f6f6f6; 
    text-align:center;
    margin:0 -25px;max-width:200px;
}
.broke-img a{
    display: block; 
    position:relative;
    padding:0 0 100% 0;
    max-width:100%;height:0;    
}
.broke-img img{overflow:hidden;
    display:inline-block;float:left;margin:0 0 6px 0;
}

.broke-info{
    font-size: 11px;
    padding:6px 4px 0 4px;
}
.h4{
    float:left;
    text-align:left;
    font-weight:normal;
    color: #555;
    line-height:20px;font-size:11px;
    display:block;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
</style>

Answer 1

你没有清浮动