我很难找到我的情况下的具体信息。我想在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>