我很难为我的案例找到具体信息。我想在一个 940 像素的 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>
示例图片
我目前拥有的:
我想要实现的目标:
非常感谢您的帮助。
最佳答案
使用我在此处的回答中显示的技术:Fluid width with equally spaced DIVs
这是您的代码: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>
关于css - 通过 CSS 在 Div 中均匀和水平分布图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10566359/