通过CSS在Div中均匀地和水平地分发图像

Question

我很难找到我的案例的具体信息.我想在940px div上分发3个图像缩略图,以便与我的其他内容对齐.到目前为止,我已经让图像水平排列,但间距已经关闭,一切都向左移动.

这是我的CSS:

#thumbs {   
  width: 940px;
  margin-top:90px;
  margin-left: auto; 
  margin-right: auto;
}

我的HTML:

<div id="thumbs">
  <a id="single_image" href="/dev/images/1.png">
    <img src="/dev/images/thumb1.png" alt=""/>
  </a>
  <a id="single_image" href="/dev/images/2.png">
    <img src="/dev/images/thumb2.png" alt=""/>
  </a>
  <a id="single_image" href="/dev/images/3.png">
    <img src="/dev/images/thumb3.png" alt=""/>
  </a>
</div>

示例图像

我目前拥有的:

我想要实现的目标:

非常感谢您的帮助.

Answer 1

使用我的答案中显示的技术:具有等间距DIV的流体宽度

这是你的代码:http://jsfiddle.net/thirtydot/JTcGZ/

CSS:

#thumbs {   
    width: 540px;
    margin-top:90px;
    margin-left: auto; 
    margin-right: auto;

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

HTML:

<div id="thumbs">
    <a id="single_image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <span class="stretch"></span>
</div>?

Answer 2

有一个干净的解决方案:

http://radiatingstar.com/distribute-divs-images-equaly-line

#container {
    text-align: justify;
}
#container > div {
    width: 100px; /* Declare your value. Can be in relative units. */
    display: inline-block;
    vertical-align: top;
}
#container:after {
    content: "";
    width: 100%;
    display: inline-block;
}

Answer 3

答案很简单,只需使用:

.container {
    display: flex;
    justify-content:space-between;
}

就这样!