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'}); 

하지만, 오른쪽 열은 첫 번째 열 발표 공간을 복용하지 않습니다.

여기에서 전환하려면 자바 스크립트를 사용했습니다 (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'); 
});