对相似模块中的不同盒子设置不同的高（最小高和自动高）（css层叠性）

面对一个相似的模块（盒子的嵌套），但是两个模块中的盒子高有不同的高时，例：如下

这两个模块的区别就是最左边的图片，第一张图片的高度是第二张图片的一倍多；
所以当我选择用两个大盒子放10个小盒子，但是当我常规的排了，代码如下

<div class="b_1">
    <div><img src="image/whale_long.jpeg" alt=""></div>
    <div><img src="image/whale.jpeg" alt=""></div>
    <div><img src="image/whale.jpeg" alt=""></div>
    <div><img src="image/whale.jpeg" alt=""></div>
    <div><img src="image/whale.jpeg" alt=""></div>
    <div><img src="image/whale.jpeg" alt=""></div>
    <div><img src="image/whale.jpeg" alt=""></div>
    <div><img src="image/whale.jpeg" alt=""></div>
    <div><img src="image/whale.jpeg" alt=""></div>
</div>
<div class="b_2">
    <div><img src="image/elk_b.jpeg" alt=""></div>
    <div><img src="image/elk_f.jpeg" alt=""></div>
    <div><img src="image/elk_f.jpeg" alt=""></div>
    <div><img src="image/elk_f.jpeg" alt=""></div>
    <div><img src="image/elk_f.jpeg" alt=""></div>
    <div><img src="image/elk_b.jpeg" alt=""></div>
    <div><img src="image/elk_f.jpeg" alt=""></div>
    <div><img src="image/elk_f.jpeg" alt=""></div>
    <div><img src="image/elk_f.jpeg" alt=""></div>
    <div><img src="image/elk_f.jpeg" alt=""></div>
</div>

css外链式代码：

*{
    margin: 0;
    padding: 0;
}
div{
    float: left;
    margin: 5px;
}
.b_1{
    width: 100%;
    background: lightcyan;
    float: left;
}
.b_1 div img {
    width: 225px;
    float: left;
}
.b_2{
    width: 100%;
    background: #ffccd2;
    float: left;
}
.b_2 div img{
    width: 225px;
    float: left;
}

两个效果为：


得出的效果是第二行的盒子被挤出来了，原因是白底的图的高度是225.35px，黑底的图高度为225px,所以当盒子设置了左浮动时，自动是在白底的图的右下方位。
当然你可以选择设置个高度，单独给第二个盒子，但是这样的话，代码的行数就会增长，所以这里需要使用css中的*!important* 命令，这个命令被赋予最大的优先级。
我是在我的css样式中的div中添加了

    height:auto !important;
    min-height:226px;

之后我的第二个模板就会改变为

原因是我设置的高度首先是自动高度，那么高度将是按所需高度自动增高，然后设置了另一个属性min-height，则当高度没有达到最小高度时，则会将高度设置为这个属性值。
这样，当我们后面的盒子没有第一个大的时候，只要设置了这个属性，测量好第一张图片的高度，将其高度向上取整设置成最小高度，则盒子左浮动时，就不会出现我最初出现的这一问题了。