Reponsive側邊欄/內容區域html css

Question

我試圖讓2 div響應，但我比我應該有更多的麻煩。

Div2默認爲100％寬度。 Div1是可切換的，當發生這種情況時，兩個div的寬度應該是50％。當關閉div2應該返回到100％的寬度。

/* Main App */ 
 
\t #app { 
 
     height: 100%; 
 
     width: 100%; 
 
    } 
 
\t #app #div1 { 
 
     width: 50%; 
 
     float: left; 
 
    } 
 
\t #app #div2 { 
 
     max-width: 100%; 
 
     min-width: 50%; 
 
     float: right; 
 
    }

<div id="app"> 
 

 
\t <div id="div1"> 
 
\t \t toggled content here 
 
\t </div> 
 
\t \t 
 
    \t <div id="div2"> 
 
    \t \t main content here 
 
\t </div> 
 

 
</div> 
 
\t

我敢肯定，這是可能的，而不使用JavaScript，對不對？

Answer 1

它可以用表或CSS彈性框模型（IE10 +）完成。無論如何，如果你切換Div2的通過JavaScript，因此你應該能夠切換一類的DIV1，例如：

$('#someToggle').click(function() { 
    $('#div2').toggle(); 
    $('#div1').toggleClass('full-width'); 
}); 

然後用CSS：

#app #div1.full-width { width: 100%; float: none; }