根據用戶控制的可見性動態定位面板

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>