Html 通过 CSS 在 Div 中均匀和水平地分布图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10566359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Distributing images evenly & horizontally in a Div via CSS
提问by Willard
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.
我很难找到我的案例的具体信息。我想在 940 像素的 div 上分发 3 个图像缩略图，以便与我的其余内容保持一致。到目前为止，我已经让图像水平排列，但间距关闭并且所有内容都向左移动。
Here is my CSS:
这是我的 CSS：
#thumbs {
width: 940px;
margin-top:90px;
margin-left: auto;
margin-right: auto;
}
My HTML:
我的 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.
非常感谢您的帮助。
回答by thirtydot
Use the technique shown in my answer here: Fluid width with equally spaced DIVs
在这里使用我的回答中显示的技术：Fluid width with equal Spaced DIVs
Here it is with your code: http://jsfiddle.net/thirtydot/JTcGZ/
这是您的代码：http: //jsfiddle.net/thirtydot/JTcGZ/
CSS:
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:
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>?
回答by Marcelo Amorim
There is an clean solution:
有一个干净的解决方案：
http://radiatingstar.com/distribute-divs-images-equaly-line
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;
}
回答by Lalo
The answer is very simple, just use:
答案很简单，只需使用：
.container {
display: flex;
justify-content:space-between;
}
That's all!
就这样！
回答by Ali
The downside of text-align: justify;is this that you there must be space between each two inline-block elements, otherwise those two elements will stick to each other.
缺点text-align: justify;是每两个内联块元素之间必须有空间，否则这两个元素会相互粘连。
you can check this behavior here: http://jsfiddle.net/JTcGZ/1552/
你可以在这里检查这个行为：http: //jsfiddle.net/JTcGZ/1552/
The new modern way to achieve this is to use flex.
实现这一目标的新现代方法是使用 flex。
#thumbs {
display: flex;
justify-content: space-between // flex-start | flex-end | center | space-around;
align-items: stretch // flex-start | flex-end | center | baseline;
}
#thumbs a {
display: inline-block;
}
Also you can define percentage width in modern browsers:
您也可以在现代浏览器中定义百分比宽度：
#thumbs a {
width: calc((100% / 3) - 10px);
}
please visit this this page for more detail on flex layout:
请访问此页面以获取有关 flex 布局的更多详细信息：
回答by CoursesWeb
Try add
尝试添加
position:relative; text-align:center;
位置：相对；文字对齐：居中；
in #thumbs, and set width and margin for (or img) within #thumbs.
在#thumbs 中，并在#thumbs 中设置（或 img）的宽度和边距。
Something like this, testing various values:
像这样，测试各种值：
#thumbs a {
width: 25%;
margin: 0 4%;
text-align:center;
}
回答by jsteinmann
why wouldn't the wrapping id div thumbs be used as a container with a top padding of 90px, and the other internal elements use a simple class (not an id so it can be reused), that all float left. that way they horizontally align perfectly, and also the wrapping container provides the margin you are looking for. you'll also use considerably much less code to accomplish what you want.
为什么不将包装 id div 拇指用作顶部填充为 90px 的容器，而其他内部元素使用一个简单的类（不是 id，因此可以重用），所有这些都向左浮动。这样它们可以完美地水平对齐，并且包装容器也提供了您正在寻找的边距。您还将使用少得多的代码来完成您想要的工作。
