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

首先，你的</a>已经破了。

其次，请确保您的无序列表保证金和填充0

最后，混乱了JSfiddle：

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

而不是花车尝试内联阻止

Answer 2

您可以尝试这样的方法 - 可以根据您的尺寸需求移除图像的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/

列表中的图像无法正确浮动

2 个答案: