浮下右推

Question

我的图片浮动正好有问题。即使我使用clear：both。这两个图像也会被浮动到左侧的图像向下推。

这是HTML

<section class="portfolio-proj">
    <article class="portfolio-img">
        <img src="http://designportfolio.ca/~graf2028_069/project_01/images/portfolio/typebook/cover.jpg" width="100%" height="100%" class="thumb-left">
        <img src="http://designportfolio.ca/~graf2028_069/project_01/images/portfolio/typebook/inside.jpg" width="49.2%" height="49.2%" class="thumb-left">
        <img src="http://designportfolio.ca/~graf2028_069/project_01/images/portfolio/typebook/about.jpg" width="49.2%" height="49.2%" class="thumb-right">
        <img src="http://designportfolio.ca/~graf2028_069/project_01/images/portfolio/typebook/excellent.jpg" width="46.2%" height="46.2%">
        <img src="http://designportfolio.ca/~graf2028_069/project_01/images/portfolio/typebook/favourite.jpg" width="52.2%" height="52.2%" class="thumb-right">
            <img src="http://designportfolio.ca/~graf2028_069/project_01/images/portfolio/typebook/anatomy.jpg" width="52.2%" height="52.2%" class="thumb-right">
    </article>
</section>

这是CSS

.portfolio-proj{
    margin: 0 auto;
    width: 960px;
}

.portfolio-img{
    float: left;
    display: inline;
    width: 68%;
}

.portfolio-img img{
    margin-bottom: 0.5em;
}

.thumb-left{
    float: left;
    clear: both;
}

.thumb-right{
    float: right;
    clear: right;
    margin-right: 0.02em;
}

这是我小提琴的链接：
http://jsfiddle.net/manabelmoose/c9h8u/2/

Answer 1

尝试将class="thumb-left"添加到excellent.jpg