我正在尝试使用可切换的布局在 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;}
最佳答案
你想要这样的东西吗?
我添加了 jQuery 脚本来显示切换效果,只需单击绿色 div。
基本上,当您设置float
和width
时,元素应该保留在display:block
中,因为它们会适合内容。
关于html - 三列 css 布局 + Toggleable 一,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16654205/