Question

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

我希望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，因为它们将适合内容。

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元素的子元素。如果lime获取类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。

三列css布局+ Togglable一个

2 个答案: