html - 三列 css 布局 + Toggleable 一

Question

我正在尝试使用可切换的布局在 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 中，因为它们会适合内容。