html - 三列css布局+可切换一个

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。

基本上，当您设置floatand时width，元素应该保留为display: block，因为它们会适合内容。

Answer 2

Working FIDDLE Demo

要创建全高页面，您需要一个包装器：

<div id="wrapper">
    <!-- MARKUP -->
</div>

这将填满整个页面：

#wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

在我们的内部wrapper，我们创建了我们想要的元素：

<div id="wrapper">
    <div id="red"></div>

    <div id="lime">
        <div id="green"></div>
        <span class="close">[X]</span>
    </div>
    <div id="white">
        TEXT
    </div>
</div>

请注意，该green元素是元素的子lime元素。如果limeget class collapsed，所有数据将被隐藏并green显示。这是CSS：

#wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#red {
    float: left;
    width: 200px;
    height: 100%;
    background: red;
}

#green {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: green;
    display: none;
    cursor: pointer;
}

#lime .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: pink;
    cursor: pointer;
}

#white {
    height: 100%;
    background: gray;
}

#lime {
    position: relative;
    float: left;
    width: 200px;
    height: 100%;
    background: lime;
    transition: width 0.5s;
}

#lime.collapsed {
    width: 30px;
}

#lime.collapsed * {
    display: none;
}

#lime.collapsed #green {
    display: block;
}

为了关闭和打开lime元素，我们需要一些 JS（我使用了 jQuery）：

$(function () {
    $('#lime .close').on('click', function () {
        $('#lime').addClass('collapsed');
    });

    $('#green').on('click', function () {
        $('#lime').removeClass('collapsed');
    });
});

你可以看到最终的FIDDLE Demo。