別のdivの非表示/表示後のメインdivの幅の調整

Question

私は2つのdivを含むメインdivを持っています。 1つはメインコンテンツ用、もう1つはサイドバーコンテンツ用です。サイドバーのコンテンツは、1つのリンクをクリックすると非表示になります。だからサイドバーが隠されているとき、私はコンテントdivがコンテナーdivとして全体のスペースを占めるようにしたい。しかし、サイドバーのコンテンツが表示されているときには、サイドバーの左側にスペースをあけて調整する必要があります。ここにはがあります。今はjqueryを使って実装しています。しかし、それを行うより良い方法があるかどうかは分かりません。おかげで

Answer 1

あなたはほとんどあります。私はあなたのコードを更新しました。基本的には、サイドバーを最初に置いて、両方を左に浮かべて、メインコンテンツに定義されている幅を取り除きたいだけです。

<div id="container"> 
    <div id="sidebar"> 
     Sidebar Content 
    </div> 

    <div id="maincontent"> 
     Main Content 
    </div> 
</div> 

#maincontent { 
    float: left; 
    border: 1px solid green; 
    height: 400px; 
} 

#sidebar{ 
    float:left; 
    width:200px; 
    border: 1px solid blue; 
    top:10px; 
    height: 200px; 
}