最近学习了一种经典布局，固定左侧或右侧的宽度，另一侧自适应宽度，此种布局挺常用，尤其是像后台，大部分都是采用这种结构，还比如像订餐类的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. Java Base64、AES、SHA1、MD5加密算法（转载）

    package com.example.decript; import java.io.UnsupportedEncodingException; import java.security.Inval ...

  2. Javascript 页面刷新

    Javascript 页面刷新的实现代码收藏 1 2 3 4 5 6 7 8 history.go(0) location.reload() location=location location.as ...

  3. filter 和 struts 拦截器的区别

    观点1: 比较一,filter基于回调函数,我们需要实现的filter接口中doFilter方法就是回调函数,而interceptor则基于java本身的反射机制,这是两者最本质的区别. 比较二,fi ...

  4. [转]20个令人惊叹的桌面Docker容器

    大家好,今天我们会列出一些运行在Docker容器中的很棒的桌面软件,我们可以在自己的桌面系统中运行它们.Docker 是一个开源项目,提供了一个可以打包.装载和运行任何应用的轻量级容器的开放平台.它没 ...

  5. TLD视觉跟踪算法（转）

    源:TLD视觉跟踪算法 TLD算法好牛逼一个,这里有个视频,是作者展示算法的效果,http://www.56.com/u83/v_NTk3Mzc1NTI.html.下面这个csdn博客里有人做的相关总 ...

  6. libusb开发者指南（转）

    源:libusb开发者指南 译者: gashero 作者: Johannes Erdfelt 日期: 2010-04-17 地址: http://libusb.sourceforge.net/doc/ ...

  7. ASP.NET脚本过滤-防止跨站脚本攻击[转]

    ASP.Net 1.1后引入了对提交表单自动检查是否存在XSS(跨站脚本攻击)的能力.当用户试图用<xxxx>之类的输入影响页面返回结果的时候,ASP.Net的引擎会引发一个HttpReq ...

  8. StackExchange.Redis 官方文档(四) KeysScan

    KEYS, SCAN, FLUSHDB 方法在哪? 经常有人问这些问题: 好像并没有看到 Keys(...) 或者 Scan(...)方法?那我要怎么查询数据库里面存有哪些key? 或者 好像没有Fl ...

  9. mysql配置主从数据库

    1.目的 1.1 实现数据备份 1.2 项目访问时可以实现读写分离,提高访问和操作数据的速度<读写分离好处> 2.背景 这次的主从配置主要实现主库数据的改变可以实现同步到从库中: 此次试验 ...

  10. VPS 上ubuntu 里搭建VPN服务器

    根据https://my.oschina.net/isnail/blog/363151里逐步完成,自己本机WIN10连接不成功,VM里面用WIN7连接也不行,找别人试连却成功了,然后自己用手机4G网络 ...