本文翻譯自：Fluid width with equally spaced DIVs
I have a fluid width container DIV. 我有一個流體寬度的容器DIV。
Within this I have 4 DIVs all 300px x 250px... 在這個我有4個DIV所有300px x 250px ...
<div id="container">
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
<div class="box4"> </div>
</div>
What I want to happen is box 1 to be floated left, box 4 to be floated right and box 2 and 3 to be spaced evenly between them. 我想要發生的是箱子1向左浮動，箱子4向右浮動，箱子2和3在它們之間均勻間隔。 I want the spacing to be fluid as well so as the browser is made smaller the space becomes smaller also. 我希望間距也是流暢的，因此隨着瀏覽器變小，空間也變小。
#1樓
參考：https://stackoom.com/question/Snww/流體寬度等間距DIV
#2樓
If css3 is an option, this can be done using the css calc() function. 如果css3是一個選項，可以使用css calc()函數完成。
Case 1: Justifying boxes on a single line ( FIDDLE ) 案例1：在單行上對齊方框（ FIDDLE ）
Markup is simple - a bunch of divs with some container element. 標記很簡單 - 一堆帶有一些容器元素的div。
CSS looks like this: CSS看起來像這樣：
div
{
height: 100px;
float: left;
background:pink;
width: 50px;
margin-right: calc((100% - 300px) / 5 - 1px);
}
div:last-child
{
margin-right:0;
}
where -1px to fix an IE9+ calc/rounding bug - see here 其中-1px來修復IE9 +計算/舍入錯誤 - 請參閱此處
Case 2: Justifying boxes on multiple lines ( FIDDLE ) 案例2：在多行上對齊方框（ FIDDLE ）
Here, in addition to the calc() function, media queries are necessary. 這裏，除了calc()函數之外，還需要media queries 。
The basic idea is to set up a media query for each #columns states, where I then use calc() to work out the margin-right on each of the elements (except the ones in the last column). 基本思想是爲每個#columns狀態設置一個媒體查詢，然後我使用calc（）來計算每個元素的邊距（除了最後一列中的元素）。
This sounds like a lot of work, but if you're using LESS or SASS this can be done quite easily 這聽起來像很多工作，但如果你使用LESS或SASS，這可以很容易地完成
(It can still be done with regular css, but then you'll have to do all the calculations manually, and then if you change your box width - you have to work out everything again) （它仍然可以通過常規css完成，但是你必須手動完成所有計算，然後如果你改變你的盒子寬度 - 你必須再次解決所有問題）
Below is an example using LESS: (You can copy/paste this code here to play with it, [it's also the code I used to generate the above mentioned fiddle]) 下面是一個使用LESS的例子:(您可以在此處複製/粘貼此代碼以使用它，[它也是我用來生成上述小提琴的代碼]）
@min-margin: 15px;
@div-width: 150px;
@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);
@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);
*{margin:0;padding:0;}
.container
{
overflow: auto;
display: block;
min-width: @3divs-width;
}
.container > div
{
margin-bottom: 20px;
width: @div-width;
height: 100px;
background: blue;
float:left;
color: #fff;
text-align: center;
}
@media (max-width: @3divs-width) {
.container > div {
margin-right: @min-margin;
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @3divs-width) and (max-width: @4divs-width) {
.container > div {
margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @4divs-width) and (max-width: @5divs-width) {
.container > div {
margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
}
.container > div:nth-child(4n) {
margin-right: 0;
}
}
@media (min-width: @5divs-width) and (max-width: @6divs-width) {
.container > div {
margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
}
.container > div:nth-child(5n) {
margin-right: 0;
}
}
@media (min-width: @6divs-width){
.container > div {
margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
}
.container > div:nth-child(6n) {
margin-right: 0;
}
}
So basically you first need to decide a box-width and a minimum margin that you want between the boxes. 所以基本上你首先需要在盒子之間決定你想要的盒子寬度和最小邊距。
With that, you can work out how much space you need for each state. 有了它，您可以計算出每個州需要多少空間。
Then, use calc() to calcuate the right margin, and nth-child to remove the right margin from the boxes in the final column. 然後，使用calc（）計算右邊距，使用nth-child從最後一列的框中刪除右邊距。
The advantage of this answer over the accepted answer which uses text-align:justify is that when you have more than one row of boxes - the boxes on the final row don't get 'justified' eg: If there are 2 boxes remaining on the final row - I don't want the first box to be on the left and the next one to be on the right - but rather that the boxes follow each other in order. 這個答案相對於使用text-align:justify的公認答案的優點是，當你有多行的方框時 - 最後一行的方框沒有'合理'，例如：如果剩下2個方框最後一行 - 我不希望第一個框在左邊，而下一個框在右邊 - 而是盒子按順序相互跟隨。
Regarding browser support : This will work on IE9+,Firefox,Chrome,Safari6.0+ - (see here for more details)
However i noticed that on IE9+ there's a bit of a glitch between media query states.
關於瀏覽器支持 ：這將適用於IE9 +，Firefox，Chrome，Safari6.0 + - （詳見此處 ）
但是我注意到在IE9 +上媒體查詢狀態之間存在一些小問題。
[if someone knows how to fix this i'd really like to know :) ]
<-- FIXED HERE
[如果有人知道如何解決這個我真的很想知道:)]
< - 固定在這裏
#3樓
in jQuery you might target the Parent directly. 在jQuery您可以直接定位Parent。
THIS IS USEFUL IF YOU DO NOT KNOW EXACTLY HOW MANY CHILDREN WILL BE ADDED DYNAMICALLY or IF YOU JUST CAN'T FIGURE OUT THEIR NUMBER. 這是有用的，如果您不知道多少兒童將被動態添加或如果您無法計算出他們的數字。
var tWidth=0;
$('.children').each(function(i,e){
tWidth += $(e).width();
///Example: If the Children have a padding-left of 10px;..
//You could do instead:
tWidth += ($(e).width()+10);
})
$('#parent').css('width',tWidth);
This will let the parent grow horizontally as the children are beng added. 這將使parent在children被添加時水平增長。
NOTE: This assumes that the '.children' have a width and Height Set 注意：這假定'.children'具有width和Height設置
Hope that Helps. 希望有助於。
#4樓
The easiest way to do this now is with a flexbox: 現在最簡單的方法是使用flexbox：
http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The CSS is then simply: 那麼CSS就是：
#container {
display: flex;
justify-content: space-between;
}
demo: http://jsfiddle.net/QPrk3/ 演示： http ： //jsfiddle.net/QPrk3/
However , this is currently only supported by relatively recent browsers ( http://caniuse.com/flexbox ). 但是 ，目前僅支持相對較新的瀏覽器（ http://caniuse.com/flexbox ）。 Also, the spec for flexbox layout has changed a few times, so it's possible to cover more browsers by additionally including an older syntax: 此外，flexbox佈局的規範已經改變了幾次，因此可以通過另外包括更舊的語法來覆蓋更多的瀏覽器：
http://css-tricks.com/old-flexbox-and-new-flexbox/ http://css-tricks.com/old-flexbox-and-new-flexbox/
http://css-tricks.com/using-flexbox/ http://css-tricks.com/using-flexbox/
#5樓
If you know the number of elements per "row" and the width of the container you can use a selector to add a margin to the elements you need to cause a justified look. 如果您知道每個“行”的元素數量和容器的寬度，您可以使用選擇器爲元素添加邊距，從而導致合理的外觀。
I had rows of three divs I wanted justified so used the: 我有三行我想要合理的行，所以使用了：
.tile:nth-child(3n+2) { margin: 0 10px }
this allows the center div in each row to have a margin that forces the 1st and 3rd div to the outside edges of the container 這允許每行中的中心div具有一個邊距，迫使第一和第三div到容器的外邊緣
Also great for other things like borders background colors etc 也適用於邊框背景顏色等其他東西
#6樓
This worked for me with 5 images in diferent sizes. 這對我來說有5個不同尺寸的圖像。
- Create a container div 創建一個容器div
- An Unordered list for the images 圖像的無序列表
- On css the unordened must be displayed vertically and without bullets 在css上，未加工的必須垂直顯示且沒有子彈
- Justify content of container div 證明容器div的內容
This works because of justify-content:space-between, and it's on a list, displayed horizontally. 這是因爲proty-content：space-between，它位於列表中，水平顯示。
On CSS 在CSS上
#container {
display: flex;
justify-content: space-between;
}
#container ul li{ display:inline; list-style-type:none;
}
On html 在HTML上
<div id="container">
<ul>
<li><img src="box1.png"><li>
<li><img src="box2.png"><li>
<li><img src="box3.png"><li>
<li><img src="box4.png"><li>
<li><img src="box5.png"><li>
</ul>
</div>