0

一連の画像を div 内で積み重ねようとしていますが、助けが必要です。div は CSS で幅が広くなるように設定されて450pxおり、上部の画像は常にその幅です。次の画像はサイズが異なり、36px右側のパディングで右揃えにする必要があります。

現在、私のコードは次のようになっています。

<div id="photos">
    <img style="position:relative; top:0px; width:450px" src="images/picture1.jpg" />
    <img style="position:relative; top:0px; float:left; left:100px" src="images/picture2.jpg" />
    <img style="position:relative; top:0px; float:right; right:36px" src="images/picture3.jpg" />
</div>

残念なことに、下の 2 枚の写真は隣り合って座りたいと思っています。2枚目の写真の後に休憩を入れても、同じ場所に残ります。

div を に設定してみましdisplay: blockたが、変化はありませんでした。

4

3 に答える 3

2

それらをスタックしたい場合は、インラインブロック http://jsfiddle.net/jax29/を使用してください

CSS

#photos{
width:450px;
}

#photos img{
display:inline-block;
}

#photos img:nth-child(n+2){
margin-right:36px;
float:right;
}

html

<div id="photos">
    <img src="http://i.imgur.com/siHvwSU.png" />
    <img src="http://i.imgur.com/siHvwSU.png" />
    <img src="http://i.imgur.com/siHvwSU.png" />
</div>
于 2013-07-24T17:35:35.660 に答える
0

これは要件に適合するはずです。

<div id="photos">
    <img src="images/picture1.jpg" /><br />
    <img src="images/picture2.jpg" style="padding-right:36px;"><br />
    <img src="images/picture3.jpg" style="padding-right:36px;">
</div>

#photos {
    width: 450px;
    text-align: right;
}
于 2013-07-24T17:43:32.400 に答える