css - CSS：展开成可折叠导航栏的流畅布局

Question

我有一个用 CSS 设计的布局，它使用 jQuery 展开和折叠导航栏。折叠时，导航栏原来所在的位置有很多可用空间；理想情况下，我希望将内容扩展到其中。

我画了一张图：

我目前正在使用：

<div>
  <div id="navbar">
    Navbar content here
  </div>

  <div id="right-side-container">
    <div id="header">
      Header content here
    </div>
    <div id="data">
      Data here
    </div>
  </div>
</div>

..当导航栏展开/折叠时，“数据” div 的宽度由 Javascript 动态设置。除了使用之外，我将如何实现这一点position: absolute？我想避免absolute，因为它会导致与设计的其余部分重叠和一般的不良流程。我认为我<div>的 s 设置不正确。

Answer 1

尝试这个。

CSS：

#navbar {
    width: 200px;
    height: 50px;
    border: 2px solid;
    margin: 0 20px 20px 0;
    float: left;
}

#navbar.expd {
    height: 200px;
}

#header {
    overflow: hidden;
    height: 50px;
    border: 2px solid;
    margin: 0 20px 20px 0;
}

#data {
    overflow: hidden;
    height: 50px;
    border: 2px solid;
    margin: 0 20px 20px 0;
}

JS：

$('#navbar').click(function() {
    $(this).toggleClass('expd');
});

http://jsfiddle.net/5FCeV/