html - 在单个 div 中的图像上应用不同的边距

Question

请考虑 jsfiddle 演示，我在其中布置了 7 张带有变换效果的卡片。现在我想对各个图像应用不同的边距，例如 card2 低 15px，card3 高 5px 等。

但是，当我将例如 margin-top: 15px 应用到 card2 时，div 中的所有卡片都使用 margin-top: 15px

呈现

另一个问题是居中的 div 在应用 width: 100% 时并没有真正居中。

<div class="centered">
<div class="container">
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card1" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card2" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card3" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card4" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card5" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card6" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card7" />
</div>
</div>

http://jsfiddle.net/kristofvhren/wtDE4/

Answer 1

试试这个:从图像中删除 inline-block 属性并使用

img {
    width: 125px;
    display:block;
    float:left;
}

相反..