均匀分布图像&水平放置在Div via CSS中 [英] Distributing images evenly & horizontally in a Div via CSS

问题描述

我很难找到适合我个案的特定资讯。我想在一个940像素的div上分发3张图片缩略图，以便与我的其他内容一致。到目前为止，我已经得到了水平排列的图像，但间距是关闭&一切都向左移动。

以下是我的CSS ：

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

我的HTML：
$ b

 < div id =thumbs> 
< a id =single_imagehref =/ dev / images / 1.png> 
< img src =/ dev / images / thumb1.pngalt =/> 
< / a> 
< a id =single_imagehref =/ dev / images / 2.png> 
< img src =/ dev / images / thumb2.pngalt =/> 
< / a> 
< a id =single_imagehref =/ dev / images / 3.png> 
< img src =/ dev / images / thumb3.pngalt =/> 
< / a> 
< / div> 
  

图片示例

我目前有的功能：

我想达成的目标：

您的帮助非常感谢。

解决方案

我的答案在这里：流体宽度与等间距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_image1href =＃>< img src =http://dummyimage.com/150x150/444/fffalt =/>< / a> ; 
< a id =single_image2href =＃>< img src =http://dummyimage.com/150x150/444/fffalt =/>< / a> ; 
< a id =single_image3href =＃>< img src =http://dummyimage.com/150x150/444/fffalt =/>< / a> ; 
< span class =stretch>< / span> 
< / div> 
  

I'm having a difficult time finding specific info for my case. I'd like to distribute 3 image thumbnails across a 940px div in order to line up with the rest of my content. So far, I've gotten the images to line up horizontally, but the spacing is off & everything is shifted left.

Here is my CSS:

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

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

Example Images

What I currently have:

What I'm trying to achieve:

Your help is much appreciated.

解决方案

Use the technique shown in my answer here: Fluid width with equally spaced DIVs

Here it is with your code: 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>​

这篇关于均匀分布图像&水平放置在Div via CSS中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！