1

HTML と CSS について簡単な質問があります。これは簡単に追跡できると思っていましたが、かなり難しいことがわかりました。基本的に、横に並んだ 2 つの DIV があります。1 つは固定幅で、もう 1 つは動的です。右側のものは、いくつかの基本情報を保持する固定幅の 400px DIV です。左側のものは、ページの残りの部分を埋めるだけです。しかし、落とし穴があります。右の DIV を (jQuery を使用して) いつでも動的に非表示にして、左の DIV でそのスペースを埋められるようにしたいのです。私はそれを行う方法がいくつかあることを知っており、すでにいくつか知っています。しかし、jQuery での CSS 操作はできるだけ少なくしたいと考えています。これが私が持っているサンプルコードです。

<body>
    <div id="right"></div>
    <div id="left"></div>
</body>

<style type="text/css">
    #left {
        height: 100%;
        margin-right: 400px;
    }
    #right {
        float: right;
        width: 400px;
        height: 100%;
    }
</style>

これに関する問題は、右マージンが永続的に 400px に設定されていることです。したがって、右側のサイズを (幅 0 に) 変更すると、400px の余白が残ります。基本的に、右側の div のサイズである左側のマージンが必要です。

どんな助けでも大歓迎です。

4

4 に答える 4

3

margin-right: 400px は必要ありません

ライブデモを見る: http://jsfiddle.net/uxCpy/1/

于 2012-08-07T15:42:09.257 に答える
0

#rightとvisibility: hiddenを切り替えvisibility: visibleます。これにより、要素をレイアウトから削除せずに非表示にできます。

JS:

$('#left').on('click',function() {
    $('#right').toggleClass('invisible');
});​

CSS:

.invisible {
    visibility: hidden;
}​

http://jsfiddle.net/mblase75/nkuv4/

于 2012-08-07T15:41:38.633 に答える
0

もう一方の div を全幅にしたいので、表示を none に設定する必要があります。with jQuery に変更するdisplay:noneと機能し、表示する必要があるときに変更しますdisplay:block

于 2012-08-07T15:42:21.113 に答える