在单个 div 中的图像上应用不同的边距答案

【问题标题】：Apply different margins on images in a single div在单个 div 中的图像上应用不同的边距
【发布时间】：2014-08-05 12:54:19
【问题描述】：

请考虑 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/

【问题讨论】：

尝试相对位置和显示块？
一开始玩得很脏对吧？当系统向您发送消息时，为什么不粘贴您的代码？

标签： html css

【解决方案1】：

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

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

相反..

【讨论】：

【解决方案2】：

在'img'标签中使用'float:left'属性，你可以在'.card2'中使用margin

【讨论】：