0

私が取り組んでいる Web サイト ( this ) には、img を含む div があります。これはhtmlです

<div><overlay> <img class="img1" height="225" src="NYC/wtc1.JPG" width="225" /></overlay</div>

<div><overlay> <img class="img2" height="225" src="NYC/wtcmem.jpg" width="225" /></overlay></div>

<div><overlay> <img class="img3" height="225" src="NYC/sky.jpg" width="225" /></overlay></div>
<p>&nbsp;</p>

複雑なことは何もありません。img1これは、 、img2、およびのクラスの CSS ですimg3。

.img1
{
position:absolute;
left:12%;
}
.img2
{
display:block;
margin:auto;
}
.img3
{
position:absolute;
right:12%;
}

また、かなり単純です。しかし、ウェブサイトを見ると、3 番目の画像 (少なくとも Safari の私にとっては) は他の 2 つよりもはるかに低くなっています。なぜこれが起こるのでしょうか？これを引き起こす CSS または HTML には何も見当たりません。

4

3 に答える 3

1

次のようなマークアップがある場合:

<div class="wrapper">
    <div><img class="img1" height="225" src="http://rwzimage.com/albums/NYC/wtc1.JPG" width="225" /></div>
    <div><img class="img2" height="225" src="http://rwzimage.com/albums/NYC/wtcmem.jpg" width="225" /></div>
    <div><img class="img3" height="225" src="http://rwzimage.com/albums/NYC/sky.jpg" width="225" /></div>
</div>

次に、このCSSはおおよそあなたが求めている効果を持つと思います:

.wrapper {
    display: table;
    width: 960px;
}

.wrapper > div {
    display: table-cell;
    width: 33%;
    text-align: center;
}

.wrapper > div:hover img {
    opacity: 0.5;
}

デモ。width: 960px;強制的に JSFiddle ウィンドウよりも広くなるように設定しwidth: 100%;ましたが、ページに合わせて設定することもできます。

于 2013-07-13T01:22:52.710 に答える