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后面加一个间隙，另一个半面板跟在右边。但挑战在于这七个面板是可拖动的，可以以任何方式重新排列。我不能添加一个新的div包装两个halfPanel或不能使用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

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

http://jsfiddle.net/w2rwbjd7/

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

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

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

Answer 2

更新：从.halfPanel将47.5%宽度降至48%。请参阅下面的代码或 this fiddle提供有效的解决方案。据我所知，可以使用任意数量的全面和半面板。

＆＃13;

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

＆＃13;

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

＆＃13;

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的示例

将边距应用于div，右边是兄弟，左边是div，左边是兄弟姐妹

3 个答案: