将边缘右翼施加到兄弟姐妹的右边或边缘左侧的divs，并在其左边的兄弟姐妹

Question

我有七个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>

CSS：

.halfPanel{
  width:48%;
  display:inline-block;
  height:48%;
  border:1px solid black;
  text-align:center;
  margin-bottom:4%;
}
.fullPanel{
  width:100%;
  display:inline-block;
  height:100%;
  border:1px solid black;
  text-align:center;
  margin-bottom:4%;
}

我需要在每个半班班上有另一个半班式的缝隙，然后遵循它的右边。但是挑战是，这七个面板是可拖动的，并且可以以任何方式重新安排。我不能添加一个新的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，根本不可扩展。有什么更好的方法可以实现这一目标吗？

jsfiddle用于我实施的。

编辑：我不能使用flexbox。

Answer 1

更新：从 48%删除 .halfPanel宽度为 47.5%。请参阅下面的代码或IN这是用于工作解决方案的小提琴。据我所知

.halfPanel{
  width:47.5%;
  display:inline-block;
  height:48%;
  border:1px solid black;
  text-align:center;
  margin-bottom:4%;
  float: left;
  margin-right: 2%;
}
.fullPanel{
  width:100%;
  display:inline-block;
  height:100%;
  border:1px solid black;
  text-align:center;
  margin-bottom:4%;
}

<div class='halfPanel'>TEST</div>
<div class='fullPanel'>TEST</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='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='fullPanel'>TEST</div>
<div class='fullPanel'>TEST</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='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='halfPanel'>TEST</div>

Answer 2

同级组合组合选择器可能为此工作：

http://jsfiddle.net/w2rwbjd7/

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

注意：使用border-color立即清楚地清楚了受选择器影响的内容。

Answer 3

.halfPanel{
  width:48%;
  display:inline-block;
  height:48%;
  border:1px solid black;
  text-align:center;
  margin-bottom:4%;
}
.fullPanel{
  width:100%;
  display:inline-block;
  height:100%;
  border:1px solid black;
  text-align:center;
  margin-bottom:4%;
}
.test {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

<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>
<span> Using Flex box (resize browser) </span>
<div class="test">
<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>

您可以尝试：nth(偶(。下面的样本和另一个带有flexbox的样本