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

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>