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

Question

我有四个宽度相同的物品。我需要它们在液体容器内拉伸。每当我调整窗口大小时，每个项目之间的间隙应该调整，使得项目仍然在容器内拉伸。这是我想要的形象。

这是代码，我试过了：

.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

Answer 1

对于有限的已知项目：

假设我们知道容器中存在的项目数。让我们说这些项目是4。让我们将这些项目分别包含在不同的部分中，并提供这些部分float: left和width: 25%。我在这里给width: 25%，因为有四个部分需要完全覆盖容器，即100/4 = 25%。这将产生如下图所示的类似视图：

正如您在上图中看到的那样，这些项目仍然没有相互对齐。我们可以看到最后一个项目和容器之间的差距。但是如果忽略这个差距，就可以看到这些项目彼此平等对齐。

所以现在我们应该能够删除包含最后一项的部分的宽度。这可以使用:last-child选择来完成。由于现在隐藏了最后一个项目持有者，我们需要拉伸其他儿童持有者。因此，我们需要将100%除以3而不是4。

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

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

它会拉伸项目，但这会隐藏最后一项。如下图所示：

我们可以通过向每个项目提供负margin-left来解决此问题，其值等于项目。应用这样，现在将隐藏第一个项目。因此，将margin-left提供给容器等于项目的宽度（正值）。

.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 */
}

因此，这将提供我们想要的解决方案：

Working Fiddle

对于未知数量的商品 ：

对于未知数量的项目，我们会将float: left替换为包含display: table-cell的项目，并展开这些部分，我们会将display: table; width: 100%;应用于父容器。由于我们必须将margin-left值应用于项目的宽度，因此我们将使用父包装器，而我们应用margin-left。 （因为，如果我们将margin-left和width：100％应用于同一元素，那么元素将溢出）

虽然我们将width: 0px提供给最后一个项目持有者部分，但它仍然占据了空间。

这可以通过将table-layout: fixed应用于父容器来解决。这将为我们提供解决方案：

Working Fiddle

此解决方案适用于动态或静态添加的任意数量的项目。它会自动调整。

对于宽度不等的项目数量未知：

对于不等/未知宽度的项目，我们一定要使用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

Answer 2

的Flex

可以使用display: flex;或 flexbox 来完成此操作 属性为justify-content: space-between;这将显示沿容器均匀分布的所有项目，其中第一个元素位于容器的开头和结尾。

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

还有更多

不同尺寸

可以说内容大小未知：

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

列

更多垂直人然后是水平人？ 没问题。

.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?
支持非常好，只是IE稍微落后于其他... ... 所以只有IE10（半）IE 11满了

链接：

MDN 良好的全面文档
CSS-tricks 我最喜欢的人