最近学习了一种经典布局，固定左侧或右侧的宽度，另一侧自适应宽度，此种布局挺常用，尤其是像后台，大部分都是采用这种结构，还比如像订餐类的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经典布局之左侧固定大小右侧自动适应的更多相关文章

  1. css左右布局，左侧固定，右侧自适应

    实现布局的几种方法,见代码: <!DOCTYPE html> <html lang="cn"> <head> <meta charset= ...

  2. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  3. CSS 实现左侧固定，右侧自适应两栏布局的方法

    "左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...

  4. css布局中左侧固定右侧自适应

    float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问 ...

  5. css实现两栏布局，左侧固定宽，右侧自适应的7中方法

    一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...

  6. CSS左侧固定宽 右侧自适应（兼容所有浏览器）

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

  7. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  8. 只要一行代码，实现五种 CSS 经典布局

    常用的页面布局,其实就那么几个.下面我会介绍5个经典布局,只要掌握了它们,就能应对绝大多数常规页面. 这几个布局都是自适应的,自动适配桌面设备和移动设备.代码实现很简单,核心代码只有一行,有很大的学习 ...

  9. CSS 两列布局 之 左侧适应，右侧固定 3种方式

    第一种:左侧用margin-right,右侧float:right CSS代码: html, body,ul,li #wrapper { width: 100%; height: 100%; padd ...

随机推荐

  1. brew udpate出现错误“/usr/local is not writable.”的问题解决

    如图所示: 在命令行输入: sudo chown -R 当前登录的用户名 /usr/local 再次输入: brew update 问题解决.

  2. BZOJ 2209: [Jsoi2011]括号序列 [splay 括号]

    2209: [Jsoi2011]括号序列 Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 1111  Solved: 541[Submit][Statu ...

  3. 小偷网站工具--Teleport Ultra

    可以克隆别人网站的工具 http://jingyan.baidu.com/article/219f4bf7dce58bde442d3836.html

  4. sql数据库中查询第几条到第几条的数据

    通用方法: select top 500 * from (select top 1000 * from UserSearchDatas order by ID) a order by ID desc ...

  5. php中DateTime的format格式以及 TtoDatetime函数

    Definition and Usage The date() function formats a local time/date. Syntaxdate(format,timestamp)Para ...

  6. java.lang.UnsupportedClassVersionError: com/T : Unsupported major.minor version问题解决

    编译的时候jdk版本为1.8 2.运行的时候jdk版本为1.7 解决办法:将编译的jdk版本降为1.7,问题解决

  7. Servlet_ResponseHeader

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcepti ...

  8. Valgrind 快速入门

    1. 介绍 Valgrind工具组提供了一套调试与分析错误的工具包,能够帮助你的程序工作的更加准确,更加快速.这些工具之中最有名的是Memcheck.它能够识别很多C或者C++程序中内存相关的错误,这 ...

  9. [QT]简单介绍一下 *.pro、*.pri、*.prf、*.prl等四种文件

    转自:http://blog.csdn.net/dbzhang800/article/details/6348432 简单介绍一下 *.pro.*.pri.*.prf.*.prl等四种文件:干嘛用的, ...

  10. 网站安全配置(Nginx)防止网站被攻击（包括使用了CDN加速之后的配置方法）

    原文链接:http://www.bzfshop.net/article/176.html 网站被攻击是一个永恒不变的话题,网站攻击的方式也是一个永恒不变的老套路.找几百个电脑(肉鸡),控制这些电脑同时 ...