Asp.net 根据用户控制的可见性动态定位面板
我有4个面板,我在顶部有一个清单,它控制着你想要查看的面板。我如何设置它,以便如果他们取消选中其中一个面板,那么其余面板将重新定位。有点模糊,所以:Asp.net 根据用户控制的可见性动态定位面板,asp.net,css,panel,Asp.net,Css,Panel,我有4个面板,我在顶部有一个清单,它控制着你想要查看的面板。我如何设置它,以便如果他们取消选中其中一个面板,那么其余面板将重新定位。有点模糊,所以: ___ ___ | 1 | | 2 | |___| |___| ___ ___ | 3 | | 4 | |___| |___| 所以如果他们取消选中2和3,我希望4是1旁边的位置 ___ ___ | 1 | | 4 | |___| |___| 如果他们只检查了3,那么4将转
___ ___
| 1 | | 2 |
|___| |___|
___ ___
| 3 | | 4 |
|___| |___|
所以如果他们取消选中2和3,我希望4是1旁边的位置
___ ___
| 1 | | 4 |
|___| |___|
如果他们只检查了3,那么4将转到3的位置。这些面板也会在页面上居中,但如果不选中类似3的选项,我希望第四个面板与第一个面板左对齐,而不是在它们之间居中。所以像这样:
___ ___
| 1 | | 2 |
|___| |___|
___
| 4 |
|___|
而不是这个:
___ ___
| 1 | | 2 |
|___| |___|
___
| 4 |
|___|
将4块面板(相同的固定尺寸)放置在一个固定容器内,该容器的宽度至少为每块面板宽度的两倍,但小于3倍。使面板浮动。示例如下:
CSS:
JS:
HTML:
1.
2.
3.
4.
1.
2.
3.
4.
面板1、2、3和4是否都是固定宽度?我想这只是块设置的问题。啊,好的,谢谢,我想我已经试过了,但遇到了问题,但我现在开始工作了。非常感谢。哦,有一件事我刚刚发现,面板的高度不同,这会导致对齐问题。比如P1是600px,P2是300px,P3是400px。所以,如果我隐藏所有面板或其他东西,然后显示1,2,然后3,第三个面板连接到P1Well nvm的下端。如果有其他人出现了同样的问题,只需将面板放在一个容器div中,具有相同的高度。是的,你只需要摆弄一下大小。
#panels {
width: 400px;
}
.panel {
float: left;
width: 190px;
height: 100px;
border: solid 1px #f00;
}
$(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();
}
);
});
<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>