根据用户控制的可见性动态定位面板

Question

我有4个面板，并且在顶部有一个清单，用于控制要查看的面板。我将如何设置它，以便如果他们取消选中其中一个面板，则其余部分将重新定位。有点模糊，所以：

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

所以，如果他们取消2和3，我想4是位置，旁边是1

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

如果他们取消选中刚刚3，然后是4会去3的位置。这些面板也将居中在页面上，但如果像3这样的东西没有被选中，我希望第四个面板与第一个面板左对齐，而不是在它们之间居中。所以这样的：

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

而且不是这样：

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

Answer 1

放置4块板（相同的固定大小）的固定容器，其是每个面板的至少两倍的宽度，但小于3倍内。浮动面板。举例如下：

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>