css - div 内的空间元素

Question

我想在同一行上放置 3 张图像，向右浮动，并且每张图像之间有一些边距。如果我使用以下代码:

<div style="float:right">
    <img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40">
    <img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40">
    <img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40">
</div>

然后我的图片在同一行，但我不知道如何设置每张图片之间的边距。

如果我将每个图像放在其自己的 div 中，例如:

<div style="float:right">
    <div style:"margin-left:10"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div>
    <div style:"margin-left:10"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div>
    <div style:"margin-left:10"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div>
</div>

然后我可以设置边距，但我的图像不再显示在同一行上，它们都向右浮动并最终在一列中。

执行此操作的正确方法是什么？

Answer 1

尝试关注

<div id="container">
  <div class="abc" > image.. </div>
  <div class="abc" > image.. </div>
  <div class="abc" > image.. </div>
</div>

然后在 css 中

#container{
    overflow:hidden;
    width:auto;
    display:inline;
}
.abc{
    float:right;
    margin-left:10px;
}

您可以在此处查看工作演示 http://jsfiddle.net/QjL2D/