Question

Example image of my code

我想在html中执行此操作，有一个div图像。 HTML;

<div class="posts-thumbnails">
                        <img src="img/archive1.png">
                        <img src="img/archive1.png">
                        <img src="img/archive1.png">
                        <img src="img/archive1.png">
                        <img src="img/archive1.png">
                        <img src="img/archive1.png">
</div>

的CSS;

.posts-thumbnails img{
width:100px;
height:100px;
margin:10px;
}

但我无法管理图像边距或填充，如果我写这样的东西，图像有10 + 10 20空白空间，我怎样才能在图像之间添加相等的空白空间

Answer 1

以下是您的简单解决方案http://jsbin.com/higidaboqe/1/edit?html,css,output 只需添加浮动，只有正确和底部填充或边缘。

Answer 2

看，正如你的问题的评论已经指出的那样，我们还有很多不知道你想做什么以及你想让它看起来如何（浮动，图像数量，定位，包含div的宽度），但如果它真的只是你要问的余量，这个答案可能已经足够了。

只需使用

.posts-thumbnails img{
width:100px;
height:100px;
margin:5px;
}

为你的div设计风格。

这就是它的样子（jsfiddle）：http://jsfiddle.net/manroo9c/

它的工作原理是在每张图像周围仅添加5px的边距。由于图像右侧的边距为5，而图像左侧的边距为5，最后它们之间的间距为10px之一。对于图像之间的空间也是如此。

更新：这个将从图像到任意方向包含div的边框获得5px的边距，所以如果你还需要10px的距离这里的边框图像是一个更新的jsfiddle，包含div的5px填充：http://jsfiddle.net/manroo9c/1/

这是CSS代码：

.posts-thumbnails img{
width:100px;
height:100px;
margin:5px;
}

.posts-thumbnails{
padding:5px;
}

Answer 3

这是你想要做的??? JS FIDDLE - ＆gt; https://jsfiddle.net/JTcGZ/1156/

 <div id="blah">
        <a id="image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
        <a id="image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
        <a id="image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
        <span class="stretch"></span>
    </div>
    <div id="blah">
        <a id="image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
        <a id="image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
        <a id="image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
        <span class="stretch"></span>
    </div>


    #blah {   
        width: 540px;
        margin-top:20px;
        margin-left: auto; 
        margin-right: auto;

         text-align: justify;
        -ms-text-justify: distribute-all-lines;
        text-justify: distribute-all-lines;
    }
    #blah a {
        vertical-align: top;
        display: inline-block;
        *display: inline;
        zoom: 1;
    }
    .stretch {
        width: 100%;
        display: inline-block;
        font-size: 0;
        line-height: 0
    }

如何在图像之间添加相等的空白空间

3 个答案: