2列靈活佈局

Question

我有2列結構。使用的CSS如下：

.div-left 
{ 
position: relative; 
float: left; 
width: 18%; 
margin: 1; 
} 

.div-right 
{ 
position: relative; 
float: right; 
width: 81%; 
margin: 0; 
} 

我想要一個靈活的結構在某種意義上，當一列被摺疊時，其他應該自動佔據空間。

我試圖隱藏第一列，如下圖所示：

$("#test").animate({width: 'toggle'}); 

這是躲在我的第一列，而右列沒有采取由第一列釋放的空間。

我把JavaScript從這裏切換（http://www.learningjquery.com/2009/02/slide-elements-in-different-directions）。

任何幫助，將不勝感激。

Answer 1

另一種解決方案：使用CSS轉換（我提到它是因爲您在標籤中列出了CSS3）和.expanded/.collapsed類。然後使用jQuery來切換類。

demo（單擊列，使其擴大/回到初始寬度）

HTML：

<div class='left'></div> 
<div class='right'></div> 

CSS：

* { margin: 0; } 
div { min-height: 10em; transition: linear 1s; } 
.left { 
    float: left; 
    width: 18%; 
    background: crimson; 
} 
.right { 
    float: right; 
    width: 81%; 
    background: dodgerblue; 
} 
.expanded { width: 100%; } 
.collapsed { width: 0%; } 

的jQuery：

$('div').click(function(){ 
    $(this).toggleClass('expanded').siblings().toggleClass('collapsed'); 
});