Question

我想在页面中间显示框，我有两个块，一个在左边，在右边，我使用'float'选项对齐每个边缘，但我无法得到通过展开显示/隐藏面板的实际高度（或自动高度）。如果我删除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');


});

Sample here

Answer 1

要在滑动切换浮动子项时根据需要扩展外部div，请将overflow: hidden添加到外部DIV（#box）。

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

Answer 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>

Demo

或者使用overflow hack（保持相同的标记）

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

}

Demo

切换CSS自动扩展高度

2 个答案: