html - 列表中的图像不能正确 float

Question

我正在尝试制作一个图像列表，每行 2 张。

不均匀的行(1、3、5等)应该先有小图，再有宽图。偶数行(2、4、6、8 等)应该首先显示宽图像，然后再显示较小的图像。

我现在在第 3 行，无论出于何种原因，我都无法将小图像移到左侧。正如您在下图中所见，它漂浮在右侧。

我的代码非常基础，Dreamweaver 在其 Split 函数中正确显示了它。

HTML:

<div id="portfolio-screen"></a>
    <ul>
            <li><img src="images/portfolio-jaar1.png" width="228"/></li>
            <li><img src="images/portfolio-pr1_2.png" width="500"/></li>
            <li><img src="images/portfolio-pr1_4.png" width="500"/></li>
            <li><img src="images/portfolio-pvs1.png" width="228"/></li>     
            <li><img src="images/portfolio-jaar2.png" width="228"/></li>
            <li><img src="images/portfolio-pr2_2.png" width="500"/></li>
    </ul>                   
</div>

CSS

#portfolio-screen       {margin-top: 8px; width: 768px; height: 602px; background-color:#37322d; overflow: auto;}
#portfolio-screen li    {margin-top: 8px; margin-left: 8px; float: left;}

由于某些原因不允许发布图片，所以我提供了一个链接:http://oi51.tinypic.com/b63vkk.jpg

Answer 1

您可以尝试这样的操作 - 可以根据您的尺寸需求删除图像的 CSS 高度。

HTML

<div id="portfolio-screen">
<ul>
    <li>
        <img src="images/portfolio-jaar1.png" class="imgSmall" />
    </li>
    <li>
        <img src="images/portfolio-pr1_2.png" class="imgLarge" />
    </li>
    <li>
        <img src="images/portfolio-pr1_4.png" class="imgLarge" />
    </li>
    <li>
        <img src="images/portfolio-pvs1.png" class="imgSmall" />
    </li>
    <li>
        <img src="images/portfolio-jaar2.png" class="imgSmall" />
    </li>
    <li>
        <img src="images/portfolio-pr2_2.png" class="imgLarge" />
    </li>
</ul>
</div>

CSS:

img {
 height:20px;
}
.imgSmall {
 width:228px;
}
.imgLarge {
 width: 500px;
}
#portfolio-screen {
 margin: 0;
 padding: 0;
 width: 768px;
 height: 602px;
 background-color:#37322d;
}
#portfolio-screen ul {
 margin: 0;
 padding: 15px;
 width: 768px;
}
#portfolio-screen li {
 margin-top: 8px;
 margin-left: 8px;
 display: inline-block;
}
#portfolio-screen li:nth-child(odd) {
 margin:0;
}

JS fiddle :http://jsfiddle.net/5qREV/