css三列等比布局,三列css布局+ Togglable一个

要创建完整高度页面，您需要一个包装器：

这将填满整个页面：

#wrapper {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

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

[X]

TEXT

请注意，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');

});

});