列表中的图像不能正确浮动答案

【问题标题】：Images in list do not float correctly列表中的图像不能正确浮动
【发布时间】：2013-02-27 16:01:52
【问题描述】：

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

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

我现在在第 3 行，无论出于何种原因，我都无法获得左侧的小图像。如下图所示，它向右浮动。

我的代码非常基础，Dreamweaver 在其拆分功能中正确显示。

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

【问题讨论】：

你得到答案了吗？

标签： html css image html-lists

【解决方案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 小提琴：http://jsfiddle.net/5qREV/

【讨论】：

好的，事实证明我可以保留我拥有的任何代码，只需添加“img {height:144px;}”行即可。有趣，猜想调整大小有一些问题（我的图片比它们在网页上显示的尺寸大）
请不要使用width 属性，这对CSS 来说是最好的，并添加alt 以进行W3C 验证。这只是一个好习惯。

【解决方案2】：

首先，你有一个坏掉的</a>。

其次，确保您的无序列表的 边距和内边距为 0

最后，搞乱 JSfiddle：

http://jsfiddle.net/Riskbreaker/NT4DS/10/

用 inline-block 代替浮点数

【讨论】：