css - 清除后如何显示与其他图像齐平的图像？

Question

我在此处附上了我当前拥有的内容以及我希望如何修复它的屏幕截图:http://i.imgur.com/urAI4UF.png

这是我的元素的简化 HTML 代码(我有 19 张图像，我在一个复杂的网格中构建，所以我只包括有问题的图像，因为其他图像一起玩得很好):

<div class="wrapper">
    <div class="images">
        <div class="col col-1-3">
            <div class="module" id="img-10">
                <img src="img/pic_10.png">
            </div>
        </div>
        <div class="col col-1-3 clear">
            <div class="module" id="img-11">
                <img src="img/pic_11.png">
            </div>
        </div>
        <div class="col col-1-3">
            <div class="module" id="img-12">
                <img src="img/pic_12.png">
            </div>
        </div>
        <div class="col col-1-3">
            <div class="module" id="img-13">
                <img src="img/pic_13.png">
            </div>
        </div>
    </div><!--.images -->
</div><!--.wrapper -->  

Img 11 有一个清晰的，所以它会把自己塞在图像 10 下，但是我无法让 img 12 和 13 与图像 10 保持一致。如果我不对 img-11 进行清除，它将与 img-10 并列。

这是我的 CSS:

* { 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box:
}
.wrapper {
    width: 1000px;
    margin:0 auto;
}
.grid {
    overflow: hidden;
}
    .col{
        float: left;
    }
    .col-1-5 {
        width: 20%;
    }
    .col-1-3 {
        width: 33.3333%;
    }
    .col-2-5 {
        width: 40%;
    }
    .col-2-3 {
        width: 66.6666%;
    }
    .col-3-5 {
        width: 60%;
    }
.module img {
    width: 100%;
    height: 100%;
    padding: 3px;
}
#img-10 {
    height: 194px;
    width: 333.33px;
}
#img-11 {
    height: 194px;
    width: 333.33px;
}
#img-12,
#img-13 {
    height: 388px;
    width: 333.33px;
}
.clear {
    clear: both;
}      

更新:我从另一个网站的 friend 那里得到了帮助，使用这段代码反而有效:

<div class="col col-1-3">
    <div class="module" id="img-10">
        <img src="img/pic_10.png">
    </div>
    <div class="module" id="img-11">
        <img src="img/pic_11.png">
    </div>
</div> 

Answer 1

更新:我从另一个网站的 friend 那里得到了帮助，使用这段代码反而有效:

<div class="col col-1-3">
    <div class="module" id="img-10">
       <img src="img/pic_10.png">
    </div>
    <div class="module" id="img-11">
        <img src="img/pic_11.png">
    </div>
</div>