Javascript 根据内容更改父div的宽度

我在父

div

中有子

div

的数量。它可以是最小2到最大8。我将child

div的宽度保持在25%不变。问题是当有2或3个子
div
s时，则使用父
div
的前50%或75%来显示这些
div
s。但是我想使用中心50%或75%的父
div
来显示这些
div
s。如果有超过4个子
div
s，则我希望显示父行的第一行而不做任何更改，并希望对第五个
div
使用居中25%，对第五和第六个div使用居中50%，对第五、第六和第七个div使用居中75%

HTML:

小提琴：
接近#01（使用Flexbox）：

您可以使用css3。在父元素上添加以下css：

.banner {
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
}

注意：您需要从子元素中删除
float
，就像
flexbox
一样，这是不必要的


.container{
宽度：100%；
保证金：0自动；
最大宽度：991px；
}
.横幅{
证明内容：中心；
柔性包装：包装；
显示器：flex；
填充：20px；
}
.区块1{
背景：绿色；
宽度：25%；
文本对齐：居中；
}
.1块img{
宽度：100%；
最大宽度：100px；
}

区块1

宴会厅

度假村

旅馆

农舍

农舍

农舍

谢谢，先生..为我两者都工作…根据您的说法，哪一个更好？@Ashish我建议使用
flexbox
。所有最新的浏览器都支持此功能。但是，如果您需要旧浏览器的支持，您应该使用第二种方法，因为即使在IE8中，它也能很好地工作。在将窗口调整为移动视图时，如果有2或3个子div，是否可以将block1 div的宽度更改为50%或33%。@Ashish您希望这样做吗@阿什，你可以查一下。我已经为你制作了一个演示。但正如我前面所说的，在这种情况下，项目不会被包装成两行。如果您将在一行中添加第5项，则它将在同一行中相应地进行调整。然而，这种方法也适用于几乎所有的浏览器。
.container{
    width:100%;
    margin:0 auto;
    max-width:991px;
}
.banner{
    padding:20px;
}
.block1{
    float:left;
    width:33%;
    text-align:center;
}
.block1 img{
    width:100%;
max-width:100px;
}

.banner {
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
}