Question

我的页面中有4个面板。一次（取决于某些条件）显示1,2,3或全部4个面板。我希望面板重新对齐，以便没有空的空间用于不存在的面板。

为了使问题更清楚，我已将上述的图示表示联系起来：如果所有面板都可见，那么它将如下所示：http://ibin.co/1zrkoFfExnRZ

如果假设Pannel 3被隐藏，它将如下所示：http://ibin.co/1zs6YimuLQzU

（正如你在图像中可以清楚地看到的那样，Panel 3最初占用的空间现在被Panel 4占用，即空间不是空的）

我该怎么做？

Answer 1

只需添加：

.panel1, .panel2, .panel3, .panel4 {
   width:50%;
   float:left;}

到您的面板应该可以正常工作。

您可以在 FIDDLE 中看到它。将display:none添加到任何面板以检查重新对齐。

Answer 2

这可以通过使用css浮动并具有固定的宽度和高度来轻松完成：

<h2> All visible </h2>
<div class="wrapper">
    <div class="block1">Block 1</div>
    <div class="block2">Block 2</div>
    <div class="block3">Block 3</div>
    <div class="block4">Block 4</div>
</div>
<div class="clear"></div>

<h2> Three visible </h2>
<div class="wrapper">
    <div class="block1">Block 1</div>
    <div class="block2">Block 2</div>
    <div class="block4">Block 4</div>
</div>

CSS：

.wrapper{
    width:440px;
    height:240px;
}
.block1, .block2, .block3, .block4{
    width:200px;
    float:left;
    margin-right:10px;
    border:5px solid #000;
    height:100px;
    margin-bottom:10px;
}
.clear{clear:both;}

.block4{float:right}

工作演示：https://jsfiddle.net/w9jcfr6g/1/

ASP：面板重新定位

2 个答案: