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

我有四件宽度相同的东西。我需要将它们拉伸到流体容器中。每当我调整窗口的大小时，每个项目之间的间隙都应该调整，使项目仍然在容器内伸展。这是我想要的图像

以下是我尝试过的代码：

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

对于有限的已知项目： 假设，我们知道容器中存在的项目数。假设项目为

4

。让我们将这些项目分别包装在单独的部分中，并为这些部分指定

float:left

和

width:25%

。这里我给出了

宽度：25%

，因为有四个部分需要完全覆盖容器，即

100/4=25%

。这将产生类似的视图，如下图所示：

正如您在上图中所看到的，这些项目仍然没有相互对齐。我们可以看到最后一件物品和容器之间的间隙。但是如果忽略间隙，您可以看到这些项彼此相等地对齐

现在我们应该可以去掉最后一个项目所在区域的宽度。这可以通过选择

：最后一个子项来完成。由于最后一个物品持有者现在已隐藏，我们需要拉伸其他子持有者。因此，我们需要用
100%
除以
3
，而不是
4

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

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

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


我们可以通过为每个项目提供负的
左边距
，其值等于项目。应用so，将隐藏第一项。因此，为容器提供与项目宽度相等的
左边距
（正值）

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



对于未知数量的项目：
对于数量未知的项目，我们将使用
display:table cell
替换
float:left
到项目保持部分，并将应用
display:table来拉伸这些部分；宽度：100%到父容器。由于我们必须应用与项目宽度相等的
marginleft
值，我们将有一个父包装器，我们将对其应用
marginleft
。（因为，如果我们对同一个元素应用左边距和宽度：100%，那么该元素将溢出）

虽然我们将宽度：0px
指定给最后一个物品持有者部分，但它仍然占据了空间


这可以通过对父容器应用
表布局：fixed
来解决。这将为我们提供解决方案：



此解决方案适用于任何数量的项目，无论是动态添加还是静态添加。它会自动调整

对于宽度不等的未知数量的项目：
对于不相等/未知的项目宽度，我们一定要使用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');
}

函数setAlign（父类、子类）{
var childDivs=document.getElementsByClassName（childCommonClass）；
var childDivsTotalWidth=0；
var childDivsLength=childDivs.length；
var parentElement=document.getElementsByClassName（parentClass）[0]；
var parentElementWidth=parentElement.offsetWidth；
对于（变量i=0；i0）{
leftWidth+=gap+childDivs[j-1].offsetWidth；
}
childDivs[j].style.left=leftWidth+px；
}
}
window.onload=setAlign（'row'，'box'）；
window.onresize=函数（）{
setAlign（'row'，'box'）；
}

Flex
这可以通过
display:flex或flexbox

您的属性后面是
justify content:space-between这将显示沿容器均匀分布的所有项目，第一个和最后一个元素位于容器的起点和终点


.container{
边缘顶部：50px；
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
证明内容：之间的空间；
背景色：白烟；
}
.项目{
宽度：50px；
高度：50px；
背景色：番茄；
}
Green先生详细解释得很好。
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');
}