0

我想让框显示在页面中间，我有两个块，一个在左侧，一个在右侧，我使用“浮动”选项对齐每个边缘，但我无法获得实际高度（或自动高度）通过展开显示/隐藏面板。如果我删除float选项，它可以正常工作，但我确实需要浮动，并且还需要集中该框。如果有人可以帮忙？多谢

这就是我所做的，

标记

<div id="box">
 <div class="selection">Some selection</div>
 <div class="open">Click ME</div>
 <div class="showpanel">This is content</div>
</div>

CSS

#box{
    border:2px solid #000;
    width:450px;
    min-height:300px;
    padding:10px 0;
    margin:0 auto;

}
.open {
    width:350px;
    height:50px;
    background:blue;
    margin:5px auto 0px auto;
    color:#fff;
    text-align:right;
    float:right;
}
.showpanel{
    width:350px;
    height:300px;
    margin:0 auto 10px auto;
    background:red;
    display:none;
    float:right;
}

.selection{
background:green;
width:100px;
height:140px;
float:left;

}

​JS 

$('.open').click(function() {

    $('.showpanel').slideToggle('slow');


});​

​</p>

样品在这里

4

2 回答 2

4

要在滑动切换浮动子项时根据需要扩展外部 div，添加overflow: hidden到外部 DIV ( #box) 应该可以。

查看演示：http: //jsfiddle.net/PJDbb/1/

于 2012-10-20T10:14:01.193 回答
2

你需要清除float

<div id="box">
 <div class="selection">Some selection</div>
 <div class="open">Click ME</div>
 <div class="showpanel">This is content</div>
</div>

演示

或使用overflowhack（保持相同的标记）

#box {
    border:2px solid #000;
    width:450px;
    min-height:300px;
    padding:10px 0;
    margin:0 auto;
    overflow:hidden;

}

演示

于 2012-10-20T10:14:49.787 回答