将margin-right应用于具有右侧同级元素的div，或将margin-left应用于具有左侧同级元素的div。

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%;
}

我需要在每个halfPanel后面添加一个间隙，如果右侧有另一个halfPanel跟随。但是挑战在于这七个面板是可拖动的，并且可以以任何方式重新排列。我不能添加一个新的div包装两个halfPanels，也不能使用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。

- PassionateProgrammer

Answer 1

更新：将.halfPanel宽度从48％降至47.5％。请参见下面的代码或此处的示例以获取可用的解决方案。据我所知，适用于任何数量的完整和半面板。

.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>

- freginold

---

在这种情况下，断点为：`<div class='halfPanel'>TEST</div><div class='fullPanel'>TEST</div> <div class='halfPanel'>TEST</div> <div class='halfPanel'>TEST</div>` - gaganshera

啊，糟糕。谢谢 @gaganshera。 - freginold

@freginold 是的，我也在尝试。非常感谢您对此感兴趣。我仍然坚信有一种纯CSS的方法可以实现它。 - PassionateProgrammer

@freginold 总间隔应为4％。 两个halfPanels的宽度总共为96％。 因此，剩余的4％应该是间隔。 - PassionateProgrammer

@freginold，我将fullPanel的宽度降低到了97％，以对齐div的结尾，现在看起来完美无瑕。向你的热情和决心致敬！ - PassionateProgrammer

Answer 2

兄弟组合选择器可能适用于此：

http://jsfiddle.net/w2rwbjd7/

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

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

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

- Toby

---

我不确定我是否正确地重用了你的带有边距的CSS规则... 请检查这个fiddle；http://jsfiddle.net/bzn217mz/1/ - PassionateProgrammer

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(even)。以下是示例和使用flexbox的另一个示例。

- blecaf

---

抱歉，我无法使用flexbox。 - PassionateProgrammer