Css 将右边距应用于右边有同级的div，或将左边距应用于左边有同级的div

我有七个div，其中五个小，两个大，如下所示：

<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='fullPanel'>TEST</div>
<div class='fullPanel'>TEST</div>

我需要在每个中间板后留出一个间隙，在其右侧有另一个中间板。但挑战在于这七个面板是可拖动的，可以以任何方式重新排列。我不能添加一个新的div来包装两个半面板，也不能使用jQuery来完成这项工作。我需要用纯css实现这一点，而不需要对HTML进行任何更改

我尝试的是：

div.halfPanel + div.halfPanel{
  margin-left:2%;
}
div.halfPanel + div.halfPanel+ div.halfPanel{
 margin-left:0%;
}

div.halfPanel + div.halfPanel+ div.halfPanel+div.halfPanel + div.halfPanel{
  margin-left:0%;
 }

div.halfPanel + div.halfPanel + div.halfPanel+ div.halfPanel{
  margin-left:2%;
}

但我知道这是丑陋的css，根本不可伸缩。 有没有更好的方法来实现这一点

因为我实现了什么

---

编辑：我无法使用flexbox。

同级组合选择器可能适用于以下情况：

注意：使用

边框颜色

可立即清楚显示选择器影响的内容。

.halfPanel{
宽度：48%；
显示：内联块；
身高：48%；
边框：1px纯黑；
文本对齐：居中；
利润底部：4%；
}
.全屏{
宽度：100%；
显示：内联块；
身高：100%；
边框：1px纯黑；
文本对齐：居中；
利润底部：4%；
}
.测试{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}

测试
试验
试验
试验
试验
试验
试验
使用Flex box（调整浏览器大小）
试验
试验
试验
试验
试验
试验
试验

更新：已从

48%

删除

。半面板
宽度为
47.5%
。请参阅下面或中的代码
寻找一个有效的解决方案。就我所知，可以使用任意数量的全面板和半面板


.halfPanel{
宽度：47.5%；
显示：内联块；
身高：48%；
边框：1px纯黑；
文本对齐：居中；
利润底部：4%；
浮动：左；
保证金权利：2%；
}
.全屏{
宽度：100%；
显示：内联块；
身高：100%；
边框：1px纯黑；
文本对齐：居中；
利润底部：4%；
}
测试
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
测试
我不确定我是否正确地使用了带有边距的css规则。。。请检查小提琴；很抱歉，我不能在这种情况下使用flexboxBreaks：
TEST
Ah，crud。谢谢@gaganshera@freginold是的，我也在努力。。非常感谢您对此感兴趣。我仍然坚信，有一种纯粹的CSS方式可以it@freginold总的差距应该是4%。两个半面板的宽度总计高达96%。所以剩下的4%应该是gap@freginold我将全面板宽度降低到97%以对齐div端点，现在看起来很完美。为你的激情和决心干杯！
div.halfPanel + div.halfPanel{
  margin-left:2%;
}
div.halfPanel + div.halfPanel+ div.halfPanel{
 margin-left:0%;
}

div.halfPanel + div.halfPanel+ div.halfPanel+div.halfPanel + div.halfPanel{
  margin-left:0%;
 }

div.halfPanel + div.halfPanel + div.halfPanel+ div.halfPanel{
  margin-left:2%;
}

div.halfPanel:first-child {
  border-color: red;
}

div.halfPanel ~ div.halfPanel {
  border-color: red;
}