Html 如何根据加载样式表后才能找到的元素数更改CSS属性？

当有两个div时，我需要在第一个div之前留一个空白。但是当有3个div时，应该没有空白

div的数量将是基于服务器端数据的动态内容。因此可以动态地有2或3个div

所需：

太空舱1舱2舱

第一组第二组第三组

---

如何在简单的CSS中实现这一点？

您可以尝试使用容器和flex，而不是边距

.caja{
宽度：100%；
显示器：flex；
柔性包装：包装；
}
卡贾·斯潘先生{
弹性：1；
}

span1
span2
span1
span2
span3
 > P>你可以考虑：

包装这些div的内容（无论是另一个div还是主体）都需要样式
display:grid
或
display:inline grid


.wrapper{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板区域：“a b c”；
}
.a{
网格面积：a；
}
.b{
网格面积：b；
}
c{
网格面积：c；
}
Two div
两个
三
三师
一个
两个
三
编辑：有关与容器中任意数量的元素兼容的解决方案，请参见底部的示例，该解决方案仅使用
浮动
和
边距

使用css很可能只使用
nth-last-of-type（）
和
nth-of-type（）
——至少在最大元素数为3的情况下（可能能够调整css更多）。检查下面的示例

说明：
n最后一个类型（2）
针对第一个元素（如果只有2个元素），但针对第二个元素（如果有3个元素）<代码>第n个类型（n+2）

以第2个和第4个类型的所有元素为目标，如果有2个以上的元素，则取消前一个类型的样式。在本例中，

n+

是不必要的，但在可能出现更多元素的情况下会包括在内

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

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

例如：

请注意，应用颜色只是为了将元素彼此区分开来

---

编辑：用于容器中任意数量元素的示例

.flooter{
浮动：左；
宽度：33.33%；
高度：50px；
背景：红色；
边框：1px实心；
框大小：边框框；
}
/*相关css位于下面的注释和下一个注释之间*/
/*相关css启动*/
.浮子：第n个类型（2）{
左缘：16.66%；
背景：蓝色；
}
.浮子：第n个类型（1）{
左缘：33.33%；
背景：蓝色；
}
.浮子：第n种类型（3n-1）{
保证金：0；
背景：绿色；
}
.浮子：第n种类型（3n）{
保证金：0；
背景：绿色；
}
/*相关css端*/
span.clearfix{
清除：左；
显示：块；
}
.垫片{
填充：20px0；
}
.集装箱{
填充：20px0；
明确：两者皆有；
}
.容器：第n种类型（2n）{
背景：#e6；
}

1元素
2要素
三要素
4要素
五要素
9要素
10个要素
11要素

你能粘贴一些你正在处理的代码吗？我在下面的答案中添加了一个扩展，为任意数量的元素添加了功能，只使用边距将元素推入。介意解释一下我的答案有什么问题吗？我已经展示了两种只使用css的方法来实现OP所要求的功能？@superuser33333，也许应该澄清一些事情。即使没有足够的内容来填充所有列，您是否希望始终有3列？或者，如果少于3列，是否希望将内容置于中心位置？如果您希望内容以自身为中心，那么这绝对是正确的答案。否则，我想我是唯一一个提供三栏布局的答案的人，即使只有两栏内容。哪个是正确的解释？@dom_ahdigital，为什么JS解决方案应该被接受？OP特别要求提供一个仅限于CSS的解决方案，有几种解决方案。

.container div{
float:left;
width:30%;
height:50px;
background:red;
border:1px solid;
}
.container div:nth-last-of-type(2){
margin-left:16%;
background:blue;
}
.container div:nth-of-type(n + 2){
margin:0;
background:green;
}