三列css布局+ Togglable一个

Question

我正在尝试使用可切换的css在css中创建3列布局.以下方案应该比文字更好地解释它.

我希望3列是全高的.

• 红色:静态宽度列
• 绿色:可切换的菜单
• 深绿色:切换后的菜单
• 白色:主要容器应该填充页面的其余部分

我尝试使用以下代码执行此操作但没有成功:

<div id="header"></div>
<div id="inline_container">
    <div id="left_menu"></div>
    <div id="toggle_menu"></div>
    <div id="main_container"></div>
</div>

并使用此css代码:

* {margin: 0; padding: 0;}
.body {height: 100%; width: 100%;}
#header {height: 70px; width: 100%;}
#inline_container {height: 95%; width: 100%;}
#left_menu {height: 100%; width: 80px; display: inline-block; float: left;}
#toggle_menu {height: 100%; width: 150px; display: inline-block; float: left;}
#main_container {height: 100%; width: 100%; display: inline-block; float: left;}

Answer 1

你想要这样的东西吗？

http://jsfiddle.net/Kcfde/

我添加了jQuery脚本来显示切换效果,只需单击绿色div.

基本上,当你设置float和width,元素应该保留display: block,因为它们将适合内容.