0

行ごとに2つの画像のリストを作成しようとしています。

不均一な行 (1、3、5 など) は、最初に小さいイメージを持ち、2 番目に広いイメージを持つ必要があります。偶数行 (2、4、6、8 など) には、最初に幅の広い画像を配置し、2 番目に小さい画像を配置する必要があります。

私は現在行 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

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>そこに壊れています。

次に、順不同のリストにMargin と padding が 0であることを確認します

最後に、JSfiddle をいじります。

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

フロートの代わりにインラインブロックを試してください

于 2013-02-27T16:21:59.873 に答える