使物品在容器内以相同的间隙拉伸

I have four items with same width. I need them to be stretched inside the fluid container. Whenever I resize the window, the gap between each item should adjust in such a way that the items are still stretching inside the container. Here is the image of what I want.

我有四件一样宽的衣服。我需要把它们伸到液体容器里。每当我调整窗口的大小时，每个项目之间的间隔都应该调整到使项目仍然在容器内展开。这是我想要的图像。

Here is the code, I have tried:

这是代码，我试过:

.parent {
    margin-top: 40px;
    background-color: beige;
}
.parent::after {
    content:"";
    clear: both;
    display: block;
}
.child {
    width: 20px;
    height: 20px;
    background-color: tomato;
    margin-left: 20%;
    float: left;
}

Fiddle

小提琴

2 个解决方案

#1

For limited known items:

Suppose, we know the number of items present in a container. Lets say the items to be 4. Lets wrap those items in separate sections each and give those sections float: left and width: 25%. Here I am giving width: 25% because there are four sections which need to cover the container completely i.e 100/4 = 25%. This will result in something similar view as shown below in the image:

假设，我们知道容器中存在的项的数量。我们设项目为4。让我们把这些项目分别放在不同的部分，并让这些部分浮动:左和宽:25%。这里我给出了宽度:25%因为有四个部分需要完全覆盖容器I。e 100/4 = 25%。这将导致如下图所示的类似视图:

As you can see in the above image, the items are still not aligned to each other. We can see gap between the last item and the container. But if you ignore the gap, you can see that the items are equally aligned to each other.

正如您在上面的图像中看到的，这些项仍然没有对齐。我们可以看到最后一项和容器之间的差距。但是如果忽略这个间隙，您可以看到这些项之间的对齐方式是一样的。

So now we should just be able to remove the width of the section holding the last item. This can be done using :last-child selection. Since, the last item holder is now hidden, we need to stretch other child holders. Hence, we need to divide 100% by 3 instead of 4.

所以现在我们应该可以移除包含最后一项的部分的宽度。这可以用:最后的选择。因为，最后一个项目持有者现在是隐藏的，我们需要扩展其他的子持有者。因此，我们需要100%除以3而不是4。

.child-holder{
    width: 33.3%;   /* Instead of 25% */
}

.child-holder:last-child {
    width: 0px;
}

It stretches the items but this hides the last item. As you can see in the below image:

它扩展了项目，但这隐藏了最后一个项目。如下图所示:

We can solve this by giving negative margin-left to each item with value equal to the items. Applying so, will now hides the first item. So, give margin-left to the container equal to the item's width (positive value).

我们可以通过给每个项赋值为负的左边界来解决这个问题。应用so, will现在隐藏第一个项目。因此，给容器留出与项目宽度相等的(正值)。

.parent {
    margin-left: 20px;  /* This value is equal to the item's width */
}
.child {
    width: 20px;
    height: 20px;
    background-color: black;
    margin-left: -20px;  /* negative margin equal to its width */
}

Hence, this will give the solution we want:

因此，这将给出我们想要的解决方案:

Working Fiddle

工作小提琴

For unknown number of items:

For unknown number of items, we will replace float: left to the item holding sections with display: table-cell and to stretch those sections, we will apply display: table; width: 100%; to the parent container. and since we must apply margin-left value equal to the item's width, we will have a parent wrapper, to which we apply margin-left instead. (Because, if we apply margin-left and width: 100% to same element, then the element will overflow)

对于未知数量的项，我们将替换float:将其保留到包含显示的项中:table-cell并将这些部分拉伸，我们将应用display: table;宽度:100%;父容器。由于我们必须将margin-left值应用到项目的宽度，因此我们将有一个父包装器，我们将使用margin-left来代替它。(因为，如果我们应用margin-left和width: 100%到相同的元素，那么元素将会溢出)

Though we are giving width: 0px to the last item holder section, it is still occupying the space.

虽然我们给最后一个项目持有者部分的宽度是:0px，但是它仍然占据着这个空间。

This can be solved by applying table-layout: fixed to the parent container. This will give us the solution:

这可以通过应用表布局来解决:固定在父容器上。这将为我们提供解决方案:

Working Fiddle

工作小提琴

This solution will work for any number of items, added dynamically or static. It will get automatically adjusted.

这个解决方案将适用于任何数量的项目，动态或静态添加。它会自动调整。

For Unknown number of items with unequal widths:

For unequal/unknown width of items, we should definitely go with javascript. Here is the small code which I wrote to use in one of the projects:

对于不相等/未知宽度的项，我们应该使用javascript。以下是我在其中一个项目中使用的小代码:

function setAlign(parentClass, childCommonClass) {
    var childDivs = document.getElementsByClassName(childCommonClass);
    var childDivsTotalWidth = 0;
    var childDivsLength = childDivs.length;
    var parentElement = document.getElementsByClassName(parentClass)[0];
    var parentElementWidth = parentElement.offsetWidth;
    for (var i = 0; i < childDivsLength; i++) {
        childDivsTotalWidth += childDivs[i].offsetWidth;
    }
    var remainingWidth = parentElementWidth - childDivsTotalWidth;

    var gap = remainingWidth / (childDivsLength - 1);
    var leftWidth = 0;
    for (var j = 0; j < childDivsLength; j++) {
        if (j > 0) {
            leftWidth += gap + childDivs[j - 1].offsetWidth;
        }
        childDivs[j].style.left = leftWidth + "px";
    }
}

window.onload = setAlign('row', 'box');
window.onresize = function () {
    setAlign('row', 'box');
}

Working Fiddle

工作小提琴

#2

Flex

This can be done with display: flex; or flexbox
Property your after is justify-content: space-between; this will display all the item evenly distributed along the container with the fist and last element at the start and end of the container.

这可以通过显示来实现:flex;或者弹性属性你的后是合理的内容:空间之间;这将显示沿着容器均匀分布的所有项，并在容器的开始和结束处显示第一个和最后一个元素。

.container {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-color: whitesmoke;
}
.item {
  width: 50px;
  height: 50px;
  background-color: tomato;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

THERE is so much more

Different sizes

Lets say the content size is not known:

假设内容大小未知:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-color: whitesmoke;
  align-items: center;
}
.item {
  width: 50px;
  height: 50px;
  background-color: tomato;
}
.one {
  width: 100px;
  height: 20px;
}
.two {
  width: 20px;
  height: 100px;
}
.three {
  width: 50px;
  height: 70px;
}
.four {
  width: 70px;
  height: 70px;
}
.headline {
  font-size: 20px;
}

<h2>Different sizes</h2>
<div class="container">
  <div class="item one"></div>
  <div class="item two"></div>
  <div class="item three"></div>
  <div class="item four"></div>
</div>

Column

More of a vertical person then a horizontal one?
No problem.

垂直的人比水平的人多?没有问题。

.container {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  background-color: whitesmoke;
  align-items: center;
  height: 500px;
}
.item {
  width: 50px;
  height: 50px;
  background-color: lime;
}
.item2 {
  width: 150px;
  height: 50px;
  background-color: tomato;
}

<div class="container">
  <div class="item"></div>
  <div class="item2"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Can i use it?
The support is really good, its just that IE is a tiny bit behind the rest...
So only IE10 (semi) IE 11 full

我可以使用它吗?支持真的很好，只是IE有点落后了……所以只有IE10(半)ie11完整

Links:

MDN Good thorough documentation
CSS-tricks My person favorite

MDN很好的完整的文档css -欺骗我的人喜欢