ASP：面板重新定位

我的頁面有4個面板。一次（取決於某些條件）顯示1,2,3或全部4個面板。我希望面板重新對齊，以便面板不存在空的空間。ASP：面板重新定位

爲了更清楚，我已經聯繫上的圖案交涉的問題：如果所有的面板是可見的話，看起來就像這樣：http://ibin.co/1zrkoFfExnRZ

如果假設潘內爾3隱藏在它看起來就像這樣：http://ibin.co/1zs6YimuLQzU

（你可以在圖像中清晰地看到，最初由3小組佔用的空間現在由第4小組所佔據，即空間不會留空）

我怎樣才能做到這一點？

2015-04-28 Payal Agarwal

只是增加：

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

到你的面板應該工作得很好。

你可以在這看到它FIDDLE。將display:none添加到任何面板以檢查重新對齊。

來源

2015-04-28 09:44:38

正如我理解的正確，他想離開panel3的空白空白，讓panel4留在它的位置。現在面板4向面板3移動 – Rotan075

他說：「我希望面板重新對齊，以便面板不存在空的空間。」不要嚇我，讓我覺得我的英語比我想象的更糟:) –

哈哈的確，我想我對這個消息有點困惑！哈哈我很抱歉！ +1爲您的解決方案。 – Rotan075

這可以很容易地通過使用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/

來源

2015-04-28 09:34:39 Rotan075

ASP：面板重新定位

回答

相關問題