0

ボックスをページの中央に表示したいのですが、左側に 1 つ、右側に 1 つの 2 つのブロックがあり、「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');


});​

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

デモ

またはoverflowハックを使用します（同じマークアップを維持します）

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

}

デモ

于 2012-10-20T10:14:49.787 に答える