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/

查看工作演示

Answer 2

默认情况下，边距，填充和边框是元素宽度的补充，而不是包含在该宽度中。虽然您的示例未指示容器div的宽度，但行为表明它可能介于120px和149px之间，假设它没有填充或边框。

假设容器是120px，您需要缩小图像或删除边距。

假设图像尺寸固定，您需要移除边距或使容器更宽。

小提琴：http://jsfiddle.net/sGxP7/

HTML：

<div class="container">
    <div class="image-holder"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div>
    <div class="image-holder"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div>
    <div class="image-holder"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div>
</div>

的CSS：

.container {
    float: right;
    width: 150px;
    padding: 0;
    margin:0;
    background: #CCC;
}

.image-holder {
    margin:0 10px 0 0;
    float: right;
    padding: 0;
}

img {
    padding: 0;
    margin: 0;
}

Answer 3

您只需在CSS中使用column-gap属性作为所需的div ID：

.container {

    column-gap: 20px;

}

div中的空间元素

3 个答案: