J'ai sept divs, cinq d'entre eux sont petits et deux sont grands comme ci-dessous:

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

Je dois mettre un espace après chaque demi-panneau qui a un autre demi-panneau le suit à sa droite. Mais le défi est que ces sept panneaux sont déplaçables et peuvent être réarrangés de n'importe quelle manière. Je ne peux pas ajouter un nouveau div enveloppant deux halfPanels ou je ne peux pas utiliser jQuery pour le faire. Je dois implémenter cela avec du css pur, sans absolument aucun changement dans le HTML.

Ce que j'ai essayé c'est:

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

Mais je sais que c'est moche css et n'est pas du tout évolutif. Y a-t-il un meilleur moyen d'y parvenir?

JSFiddle pour ce que j'ai implémenté.

MODIFIER: je ne peux pas utiliser flexbox.

css
3
PassionateProgrammer 20 avril 2017 à 20:54

3 réponses

Meilleure réponse

Mise à jour : la largeur de .halfPanel a été supprimée de 48% à 47.5%. Voir le code ci-dessous ou dans ce violon pour une solution de travail. Fonctionne avec n'importe quel nombre de panneaux pleins et demi pour autant que je sache.

.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>
2
freginold 21 avril 2017 à 17:02
.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>

Vous pouvez essayer le: nth (pair). Exemple ci-dessous et un autre exemple avec flexbox

1
blecaf 20 avril 2017 à 19:32

Le sélecteur de combinateur frère pourrait fonctionner pour cela:

http://jsfiddle.net/w2rwbjd7/

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

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

Remarque: utilisé border-color pour une clarté immédiate de ce qui est affecté par les sélecteurs.

2
Toby 20 avril 2017 à 18:05