Html 将 div 均匀分布在一条水平线上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26023319/
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
Distribute divs evenly in a horizontal line
提问by Bojan
I'm trying to distribute divs evenly in a horizontal line. I will have 3 divs on maximum width of the screen. When I resize the browser and it can't fit 3 then it will switch to two, and then one. I have found a few examples of how this is done, but none of them do it in the way I am looking for. For example what I want is this:
我试图在水平线上均匀分布 div。我将在屏幕的最大宽度上有 3 个 div。当我调整浏览器的大小并且它不能容纳 3 时，它将切换到两个，然后一个。我找到了一些关于如何做到这一点的例子，但没有一个以我正在寻找的方式做到这一点。例如我想要的是这样的：
Full Screen width:
全屏宽度：
[------------------------------------------]
[ [--------] [--------] [--------] ]
[ [ ] [ ] [ ] ]
[ [ ] [ ] [ ] ]
[ [--------] [--------] [--------] ]
[ ]
[ [--------] [--------] [--------] ]
[ [ ] [ ] [ ] ]
[ [ ] [ ] [ ] ]
[ [--------] [--------] [--------] ]
[------------------------------------------]
Resized width:
调整后的宽度：
[-----------------------------]
[ [--------] [--------] ]
[ [ ] [ ] ]
[ [ ] [ ] ]
[ [--------] [--------] ]
[ ]
[ [--------] [--------] ]
[ [ ] [ ] ]
[ [ ] [ ] ]
[ [--------] [--------] ]
[ ]
[ [--------] [--------] ]
[ [ ] [ ] ]
[ [ ] [ ] ]
[ [--------] [--------] ]
[-----------------------------]
Note that the divs are centered on the page every time.
请注意，div 每次都以页面为中心。
What I was able to find are these examples which force the divs to be left and right with the borders of the div and then space is evently distributed such as example below:
我能找到的是这些示例，它们强制 div 与 div 的边界左右对齐，然后空间随机分布，如下例所示：
[-----------------------------]
[[--------] [--------]]
[[ ] [ ]]
[[ ] [ ]]
[[--------] [--------]]
[ ]
[[--------] [--------]]
[[ ] [ ]]
[[ ] [ ]]
[[--------] [--------]]
[ ]
[[--------] [--------]]
[[ ] [ ]]
[[ ] [ ]]
[[--------] [--------]]
[-----------------------------]
Here are the code examples of what I tried:
以下是我尝试过的代码示例：
- http://jsfiddle.net/k9FqG/--- This one only works cause of text-align, but that doesn't work on divs, just text. I need text to stay aligned left. This also does not drops the divs when I resize browser.
- http://radiatingstar.com/distribute-divs-images-equaly-line
- http://jsfiddle.net/BYEw5/--- This one only works cause of text-align, but that doesn't work on divs, just text. I need text to stay aligned left. This also does not drops the divs when I resize browser.
- http://jsfiddle.net/k9FqG/--- 这个只适用于文本对齐的原因，但这不适用于 div，只是文本。我需要文字保持左对齐。当我调整浏览器大小时，这也不会删除 div。
- http://radiatingstar.com/distribute-divs-images-equaly-line
- http://jsfiddle.net/BYEw5/--- 这个只适用于文本对齐的原因，但这不适用于 div，只是文本。我需要文字保持左对齐。当我调整浏览器大小时，这也不会删除 div。
回答by Aru
Hope this is what you are trying to do with!!!
希望这就是你想要做的！！！
CSS
CSS
#container {
width:100%;
text-align:center;
}
#container > div {
width: calc(100% / 6);
display: inline-block;
vertical-align: top;
border:1px solid red;
text-align:center;
margin:2%;
padding:20px;
}
HTML
HTML
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
See it in action at http://jsfiddle.net/bvgn46hu/1
在http://jsfiddle.net/bvgn46hu/1 上查看它的实际效果
回答by stot
All modern browsers now support also flexible content (pure css). If you dont know the number of elements before hand:
所有现代浏览器现在也支持灵活的内容（纯 css）。如果您事先不知道元素的数量：
#container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
See here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
请参阅此处 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
