本文作者：IMWeb 赛冷思

未经同意，禁止转载

最近学习了一种经典布局，固定左侧或右侧的宽度，另一侧自适应宽度，此种布局挺常用，尤其是像后台，大部分都是采用这种结构，还比如像订餐类的APP，进入商家的时候，会出现一堆饭的列表，左侧是饭的分类，右侧是饭的列表等等。反正挺实用，值得收藏！

先看HTML代码

​

左侧固定，右侧自适应

左侧固定，右侧自适应布局

css代码

*{

margin:0;

padding:0;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

}

/* 两列右侧自适应布局 */

.left-fixed_right-auto{

width:100%;

height:200px;

clear:both;

display:inline-block;

margin-top:20px;

}

.left{

position:relative;

float:left;

width:200px;/* 数值核心1 */

height:100%;

margin-right:-200px;/* 数值核心2 */

background:red;

}

.right{

float:right;

width:100%;

height:100%;

background:pink;

}

.right-content{

margin-left:200px;/* 数值核心3 */

height:100%;

background:blue;

}

你可以尝试改变你的浏览器窗口，会发现，不管怎么改变大小，始终都是这种布局。有了这个规律，便可以实现一种动态效果，比如有一种场景：

左侧里面放一个按钮，通过点击这个按钮，来切换左侧的宽度大小。当左侧变窄时，右侧自动变宽；当左侧变宽时，右侧自动变窄，下面来实现一下：

js代码，在这之前，需要注释css中的以下三行代码

.left{

position:relative;

float:left;

/* width:200px; */

height:100%;

/* margin-right:-200px; */

background:red;

}

.right-content{

/* margin-left:200px; */

height:100%;

background:blue;

}

其实这三行我已在注释中标明了，分别是数值核心1，2，3.

javascript(我没有写window.onload，请务必放到dom的下面执行)

var doc=document,

/**

* [flag 当前展示宽度状态，true:使用最大宽度;false:使用最小宽度。默认是使用最大宽度]

* @type {Boolean}

*/

flag=true,

/**

* [maxWidth，minWidth 分别是左侧的最大和最小宽度]

* @type {String}

*/

maxWidth="200px",

minWidth="50px",

//左侧按钮容器

btnContainer=doc.querySelector(".toggle-btn"),

//左侧容器和右侧容器，实际上就只需要操作这两个元素

leftContainer=doc.querySelector(".left"),

rightContent=doc.querySelector(".right-content"),

/**

* 切换宽度大小

* @param {String} width 左侧需要显示的宽度(带px)

*/

setToggleLayout=function(width){

leftContainer.style.width=width;

leftContainer.style.marginRight="-"+width;

rightContent.style.marginLeft=width;

};

//初始化先调用一下，根据前面定义的规则，默认显示最大宽度

setToggleLayout(flag ? maxWidth : minWidth);

//点击按钮切换大小

btnContainer.οnclick=function(){

flag=!flag;

setToggleLayout(flag ? maxWidth : minWidth);

btnContainer=flag ? "收起" : "展开";

};

其实这只是简单的封装，你可以使用jQuery加入动画，还可以写成jQuery插件等。