等间距的流体宽度

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. I want the spacing to be fluid as well so as the browser is made smaller the space becomes smaller also.

我想要的是第1个盒子向左浮动，第4个盒子向右浮动，第2和第3个盒子在它们之间均匀的间隔。我想要的间隔也是流体的，所以浏览器越小，空间也越小。

7 个解决方案

#1

See: http://jsfiddle.net/thirtydot/EDp8R/

参见:http://jsfiddle.net/thirtydot/EDp8R/

• This works in IE6+ and all modern browsers!
• 这在IE6+和所有现代浏览器中都适用!
• I've halved your requested dimensions just to make it easier to work with.
• 我把你要求的尺寸减少了一半，只是为了便于操作。
• text-align: justify combined with .stretch is what's handling the positioning.
• 文本对齐:对齐和。
• display:inline-block; *display:inline; zoom:1 fixes inline-block for IE6/7, see here.
• 显示:inline-block;*显示:内联;缩放:1修复IE6/7的内线块，见这里。
• font-size: 0; line-height: 0 fixes a minor issue in IE6.
• 字体大小:0;行高:0修复IE6中的一个小问题。

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  /* just for demo */
  min-width: 612px;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}

<div id="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <span class="stretch"></span>
</div>

The extra span (.stretch) can be replaced with :after.

额外的跨度(.stretch)可以用:after。

This still works in all the same browsers as the above solution. :after doesn't work in IE6/7, but they're using distribute-all-lines anyway, so it doesn't matter.

这仍然适用于所有与上述解决方案相同的浏览器。:after在IE6/7中不工作，但是他们使用的是分布线，所以没关系。

See: http://jsfiddle.net/thirtydot/EDp8R/3/

参见:http://jsfiddle.net/thirtydot/EDp8R/3/

There's a minor downside to :after: to make the last row work perfectly in Safari, you have to be careful with the whitespace in the HTML.

对于:after:要使最后一行在Safari中完美地工作，您必须小心HTML中的空格。

Specifically, this doesn't work:

具体地说,这并不工作:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div>
</div>

And this does:

这是:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div></div>

---

You can use this for any arbitrary number of child divs without adding a boxN class to each one by changing

您可以对任意数量的子divs使用此函数，而无需通过更改向每个子div添加boxN类

.box1, .box2, .box3, .box4 { ...

to

来

#container > div { ...

This selects any div that is the first child of the #container div, and no others below it. To generalize the background colors, you can use the CSS3 nth-order selector, although it's only supported in IE9+ and other modern browsers:

这将选择任何#container div的第一个子div，而不是它下面的其他div。为了概括背景颜色，您可以使用CSS3 nth-order选择器，尽管它只支持IE9+和其他现代浏览器:

.box1, .box3 { ...

becomes:

就变成:

#container > div:nth-child(odd) { ...

See here for a jsfiddle example.

请参见这里的jsfiddle示例。

#2

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). 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:

然而，这一功能目前只被最近的浏览器支持(http://caniuse.com/flexbox)。此外，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/

#3

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 )

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

修正IE9+ calc/四舍五入错误的-1px -见这里吗

Case 2: Justifying boxes on multiple lines ( FIDDLE )

Here, in addition to the calc() function, media queries are necessary.

在这里，除了calc()函数之外，还需要进行媒体查询。

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

这听起来像很多工作，但是如果你使用的少或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的示例:(您可以在这里复制/粘贴此代码来处理它，[它也是我用来生成上面提到的fiddle的代码])

@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:理由是,当你有超过一行的盒子,盒子放在最后一行没有得到‘合理的’,如果有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. [if someone knows how to fix this i'd really like to know :) ] <-- FIXED HERE

关于浏览器支持:这将适用于IE9+、Firefox、Chrome、Safari6.0+ -(详情请参见这里)，但是我注意到，在IE9+上，媒体查询状态之间有一点小问题。如果有人知道如何修复这个问题，我真的很想知道:)<-- -固定在这里

#4

Other posts have mentioned flexbox, but if more than one row of items is necessary, flexbox's space-between property fails (see the end of the post)

其他帖子也提到了flexbox，但如果需要多于一行的物品，flexbox的“间隔空间”就会失败(见文章结尾)

To date, the only clean solution for this is with the

到目前为止，唯一干净的解决方案是

CSS Grid Layout Module (Codepen demo)

Basically the relevant code necessary boils down to this:

基本上相关的必要准则可以归结为:

ul {
  display: grid; /* (1) */
  grid-template-columns: repeat(auto-fit, 120px); /* (2) */
  grid-gap: 1rem; /* (3) */
  justify-content: space-between; /* (4) */
  align-content: flex-start; /* (5) */
}

1) Make the container element a grid container

1)使容器元素成为网格容器。

2) Set the grid with an 'auto' amount of columns - as necessary. This is done for responsive layouts. The width of each column will be 120px. (Note the use of auto-fit (as apposed to auto-fill) which (for a 1-row layout) collapses empty tracks to 0 - allowing the items to expand to take up the remaining space. (check out this demo to see what I'm talking about) ).

2)在网格中设置“自动”的列数——如有必要。这是为响应性布局所做的。每一列的宽度是120px。(注意使用自动拟合(作为自动填充)，它(对于1行布局)将空轨道折叠为0——允许项目展开以占据剩余空间。(看看这个演示，看看我在说什么)。

3) Set gaps/gutters for the grid rows and columns - here, since want a 'space-between' layout - the gap will actually be a minimum gap because it will grow as necessary.

3)为网格行和列设置间隙/水槽——这里，由于需要“间隔”布局，因此间隙实际上将是最小的间隙，因为它将根据需要增长。

4) and 5) - Similar to flexbox.

4)和5)——类似于flexbox。

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  grid-gap: 1rem;
  justify-content: space-between;
  align-content: flex-start;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
}
li {
  background: tomato;
  height: 120px;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen demo (Resize to see the effect)

---

Browser Support - Caniuse

Currently supported by Chrome (Blink), Firefox, Safari and Edge! ... with partial support from IE (See this post by Rachel Andrew)

目前支持Chrome (Blink)、Firefox、Safari和Edge!…IE的部分支持(参见Rachel Andrew的文章)

---

NB:

Flexbox's space-between property works great for one row of items, but when applied to a flex container which wraps it's items - (with flex-wrap: wrap) - fails, because you have no control over the alignment of the last row of items; the last row will always be justified (usually not what you want)

Flexbox在性能上的空间对于一列项目来说非常有用，但是当它应用到一个封装它的flex容器时——(使用flex-wrap: wrap)—失败了，因为您无法控制最后一行的对齐方式;最后一行始终是合理的(通常不是您想要的)

To demonstrate:

为了演示:

body {
  margin: 0;
}
ul {
  
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
  
}
li {
  background: tomato;
  width: 110px;
  height: 80px;
  margin-bottom: 1rem;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen (Resize to see what i'm talking about)

Codepen(调整大小看看我在说什么)

---

Further reading on CSS grids:

进一步阅读CSS网格:

• MDN
• 中数
• Jen Simmons - Learn CSS grid
• 珍西蒙斯-学习CSS网格
• A Complete Guide to CSS Grid | Codrops CSS Reference
• CSS Grid | codrop CSS参考的完整指南
• A Complete Guide to Grid - CSS Tricks
• 一个完整的网格CSS技巧指南。

#5

in jQuery you might target the Parent directly.

在jQuery中，可以直接针对父类。

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.

这将使父进程水平地增长，因为子进程是beng添加的。

NOTE: This assumes that the '.children' have a width and Height Set

注:此假设为。儿童有一个宽度和高度设置

Hope that Helps.

希望有帮助。

#6

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 }

.tile:nth-child(3n+2)

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有一个空格，强制将第1和第3个div设置到容器的外部边缘

Also great for other things like borders background colors etc

也适用于其他东西，比如边框，背景色等等

#7

This worked for me with 5 images in diferent sizes.

这对我有5张不同大小的图片。

1. Create a container div
2. 创建一个容器div
3. An Unordered list for the images
4. 图像的无序列表
5. On css the unordened must be displayed vertically and without bullets
6. 在css中，必须垂直显示，没有子弹
7. Justify content of container div
8. 确定容器div的内容

This works because of justify-content:space-between, and it's on a list, displayed horizontally.

它的工作原理是这样的:空格-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>