3

我想在同一行上有 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>

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

这样做的正确方法是什么？

4

3 回答 3

3

尝试关注

<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/

于 2013-09-01T16:04:10.980 回答
0

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

假设容器为 120 像素，您需要缩小图像或移除它们的边距。

假设图像大小是固定的，您需要删除边距或使容器更宽。

一个小提琴：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;
}
于 2013-09-01T16:27:50.823 回答
0

你可以在你的 CSS 中使用 column-gap 属性来获取你想要的 div id：

.container {

    column-gap: 20px;

}
于 2020-12-15T17:39:52.510 回答