首页 > 代码库 > css经典布局之左侧固定大小右侧自动适应
css经典布局之左侧固定大小右侧自动适应
最近学习了一种经典布局，固定左侧或右侧的宽度，另一侧自适应宽度，此种布局挺常用，尤其是像后台，大部分都是采用这种结构，还比如像订餐类的APP，进入商家的时候，会出现一堆饭的列表，左侧是饭的分类，右侧是饭的列表等等。反正挺实用，值得收藏！
先看HTML代码
<!doctype html><html> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>左侧固定，右侧自适应</title> </head> <body> <h1>左侧固定，右侧自适应布局</h1> <div class="left-fixed_right-auto"> <div class="left"> 左侧定宽左侧定宽左侧定宽左侧定宽左侧定宽左侧定宽 </div> <div class="right"> <div class="right-content"> 右侧自适应,这是会自动换行的换行的换行的发动发动发扥扥这是会自动换行的换行的换行的发动发动发扥扥这是会自动换行的换行的换行的发动发动发扥扥这是会自动换行的换行的换行的发动发动发扥扥 </div> </div> </div> </body></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.onclick=function(){ flag=!flag; setToggleLayout(flag ? maxWidth : minWidth); btnContainer.innerHTML=flag ? "收起" : "展开";};
点击查看效果
点击查看完整代码
其实这只是简单的封装，你可以使用jQuery加入动画，还可以写成jQuery插件等。
个人官方博客：赛冷思个人博客
css经典布局之左侧固定大小右侧自动适应
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。