positionnement dynamique des panneaux en fonction de leur visibilité contrôlée par l'utilisateur

Question

J'ai 4 panneaux, et j'ai une liste de contrôle en haut qui contrôle les panneaux que vous voulez voir. Comment pourrais-je le configurer de sorte que s'ils décochent un des panneaux, alors le reste se repositionnera. Un peu vague, donc:

___ ___ 
    | 1 | | 2 | 
    |___| |___| 
    ___ ___ 
    | 3 | | 4 | 
    |___| |___| 

S'ils décocher 2 et 3, je voudrais 4 soit la position à côté de 1

___ ___ 
    | 1 | | 4 | 
    |___| |___| 

Et si elles non vérifiées seulement 3, puis 4 irait à la position des 3. Ces panneaux seraient également centrés sur la page, mais si le quelque chose comme le 3 n'est pas coché, je veux que le quatrième panneau soit aligné avec le premier panneau, et non centré entre eux. Ainsi, comme ceci:

___ ___ 
    | 1 | | 2 | 
    |___| |___| 
    ___ 
    | 4 | 
    |___| 

Et pas:

___ ___ 
    | 1 | | 2 | 
    |___| |___| 
     ___ 
     | 4 | 
     |___| 

Answer 1

Placer les 4 panneaux (même taille fixe) à l'intérieur d'un conteneur fixe qui est au moins deux fois la largeur de chaque panneau, mais inférieur à 3 fois . Flotter le panneau. Exemple comme suit:

CSS:

#panels { 
    width: 400px; 
} 
.panel { 
    float: left; 
    width: 190px; 
    height: 100px; 
    border: solid 1px #f00; 

} 

JS:

$(function(){ 
    $("div input[type='checkbox']").attr('checked',true); 
    $("div input[type='checkbox']").change(function() { 
      if($(this).attr('checked')) 
       $('#' + $(this).val()).show(); 
      else 
       $('#' + $(this).val()).hide(); 
     } 
    ); 
}); 

HTML:

<div> 
<label for="p1"><input type="checkbox" value="panel1" />1</label> 
<label for="p2"><input type="checkbox" value="panel2" />2</label> 
<label for="p3"><input type="checkbox" value="panel3" />3</label> 
<label for="p4"><input type="checkbox" value="panel4" />4</label> 
</div> 
<div id="panels"> 
<div class="panel" id="panel1">1</div> 
<div class="panel" id="panel2">2</div> 
<div class="panel" id="panel3">3</div> 
<div class="panel" id="panel4">4</div> 
</div>