2011-07-01 3 views
1

두 div가 포함 된 주 div가 있습니다. 하나는 메인 컨텐츠 용이고 다른 하나는 사이드 바 컨텐츠 용입니다. 사이드 바 콘텐츠는 한 링크를 클릭하면 숨겨 지거나 표시됩니다. 사이드 바가 숨겨져있을 때 콘텐트 div가 콘테이너 div처럼 전체 공간을 차지하기를 원합니다. 그러나 사이드 바 콘텐츠가 표시되면 왼쪽의 사이드 바에 약간의 공간을두고 조정해야합니다. 다음은 입니다. 지금 나는 jquery를 사용하여 구현하고있다. 그러나 더 나은 방법이 있는지 확실하지 않습니다. 감사합니다.다른 div의 숨기기/표시 후 주 div의 너비 조절

+0

비슷한 질문 : 이러한 기술이 도움이 될 수 있습니다 희망 .. http://stackoverflow.com/questions/37203257/auto-adjust-width-of-divs-on-show-hide-of-one-div- in-bootstrap-html – AngularDoubts

답변

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; 
} 
관련 문제