0

我正在尝试制作一个图像列表，每行 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

4

2 回答 2

0

您可以尝试这样的事情 - 可以根据您的尺寸需要删除图像的 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/

于 2013-02-27T16:39:28.487 回答
0

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

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

最后，弄乱 JSfiddle：

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

而不是浮动尝试内联块

于 2013-02-27T16:21:59.873 回答