Html 如何根据数量使项目宽度达到100%、50%或33%

我有一个容器，有时有两个或三个或一个项目。如果有一个项目，我希望每个容器（只有一个）的宽度为100%。如果有两个项目，我希望每个容器的宽度为50%。如果有三个项目，我希望每个容器的宽度为33%。项目的数量在脚本执行之前不知道，但在脚本执行之后才知道。如何在css中实现上述功能？

瞧，

flex:1

的强大功能

• 同一容器的五种变体
• 每个容器的div数不断增加（从1到5）
• 纯CSS（flexbox）和一套适用于所有用户的样式规则
• 无需定义任何宽度或百分比

正文{
显示器：flex；
对齐内容：居中；/*居中页面上的容器*/
柔性包装：包装；
}
.集装箱{
显示器：flex；
宽度：75%；
边缘底部：10px；/*非必要装饰风格*/
背景色：黄色；/*非基本装饰风格*/
边框：1件纯黑；/*非基本装饰风格*/
}
.盒子{
flex:1；/*关键规则*/
高度：50px；
边距：5px；/*非必要装饰风格*/
背景色：浅绿色；/*非基本装饰风格*/
}

---

瞧，

flex:1的力量


同一容器的五种变体
每个容器的div数不断增加（从1到5）
纯CSS（flexbox）和一套适用于所有用户的样式规则
无需定义任何宽度或百分比


正文{
显示器：flex；
对齐内容：居中；/*居中页面上的容器*/
柔性包装：包装；
}
.集装箱{
显示器：flex；
宽度：75%；
边缘底部：10px；/*非必要装饰风格*/
背景色：黄色；/*非基本装饰风格*/
边框：1件纯黑；/*非基本装饰风格*/
}
.盒子{
flex:1；/*关键规则*/
高度：50px；
边距：5px；/*非必要装饰风格*/
背景色：浅绿色；/*非基本装饰风格*/
}
您可以通过使用成对的
：n个类型
和
：n个最后一个类型
伪类来实现此效果

li:nth-of-type(1):nth-last-of-type(1) {
width: 100%;
}

li:nth-of-type(1):nth-last-of-type(2),
li:nth-of-type(2):nth-last-of-type(1) {
width: 50%;
}

li:nth-of-type(1):nth-last-of-type(3),
li:nth-of-type(2):nth-last-of-type(2),
li:nth-of-type(3):nth-last-of-type(1) {
width: 33.33%;
}

完整示例：


ol{
显示：块；
高度：40px；
保证金：0；
填充：0；
}
李{
显示：内联块；
边际：2px0；
填充：0；
高度：36px；
颜色：rgb（255255）；
背景色：rgb（127127）；
字体大小：粗体；
}
李：第n种类型（1）{
背景色：rgb（255,0,0）；
}
李：第n种类型（2）{
背景色：rgb（63225,63）；
}
李：第n种类型（3）{
背景色：rgb（0,0255）；
}
李：第n个类型（1）：第n个最后一个类型（1）{
宽度：100%；
}
li:n第（1）类：第n最后一个第（2）类，
李：第n个类型（2）：第n个最后一个类型（1）{
宽度：50%；
}
li:n第（1）类：第n最后一个第（3）类，
li:n第（2）类：第n最后一个第（2）类，
李：第n个类型（3）：第n个最后一个类型（1）{
宽度：33.33%；
}
100%项目
50%项目
50%项目
33%项目
33%项目
33%项目
您可以通过使用成对的
：n个类型
和
：n个类型
伪类来实现此效果

li:nth-of-type(1):nth-last-of-type(1) {
width: 100%;
}

li:nth-of-type(1):nth-last-of-type(2),
li:nth-of-type(2):nth-last-of-type(1) {
width: 50%;
}

li:nth-of-type(1):nth-last-of-type(3),
li:nth-of-type(2):nth-last-of-type(2),
li:nth-of-type(3):nth-last-of-type(1) {
width: 33.33%;
}

完整示例：


ol{
显示：块；
高度：40px；
保证金：0；
填充：0；
}
李{
显示：内联块；
边际：2px0；
填充：0；
高度：36px；
颜色：rgb（255255）；
背景色：rgb（127127）；
字体大小：粗体；
}
李：第n种类型（1）{
背景色：rgb（255,0,0）；
}
李：第n种类型（2）{
背景色：rgb（63225,63）；
}
李：第n种类型（3）{
背景色：rgb（0,0255）；
}
李：第n个类型（1）：第n个最后一个类型（1）{
宽度：100%；
}
li:n第（1）类：第n最后一个第（2）类，
李：第n个类型（2）：第n个最后一个类型（1）{
宽度：50%；
}
li:n第（1）类：第n最后一个第（3）类，
li:n第（2）类：第n最后一个第（2）类，
李：第n个类型（3）：第n个最后一个类型（1）{
宽度：33.33%；
}
100%项目
50%项目
50%项目
33%项目
33%项目
33%项目
在脚本中，您可以轻松计算所需的百分比，然后对每个项目影响相应的类，假设您已经在CSS定义中包含这些类。请向我们展示当前的脚本和HTML代码以获得更详细的答案。如上所述，服务器端脚本可以根据项目的数量生成类。您还可以使用JavaScript计算项目的数量，并基于此在脚本中应用CSS类，您可以轻松计算所需的百分比，然后对每个项目影响相应的类，假设您已经在CSS定义中包含这些类。请向我们展示当前的脚本和HTML代码以获得更详细的答案。如上所述，服务器端脚本可以根据项目的数量生成类。您还可以使用JavaScript计算项目的数量，并在此基础上应用CSS类My god，Flex真是太棒了。问题：如果宽度分布均匀，为什么需要设置
width:75px？所以看起来不错。。。是75%，不是吗px@Aziz，我忘了删除那个。你说得对。谢谢，天哪，Flex真的很棒。问题：如果宽度分布均匀，为什么需要设置
width:75px？所以看起来不错。。。是75%，不是吗px@Aziz，我忘了删除那个。你说得对。谢谢。浏览器对此有什么支持？有趣的方法从IE9开始提供完整的浏览器支持。请参阅：浏览器对此有何支持？有趣的方法