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

    一.解析和遍历一个HTML文档1.解析Html及Url链接 String html = "<html><head><title>First parse&l ...

  2. HDU 4044 GeoDefense

    树形DP,和背包差不多.dp[now][x]表示now这个节点的子树上,花费为x的时候,获得的最大防御能力(保证敌方HP<=0) #include<cstdio> #include& ...

  3. Extjs的架构设计思考，单页面应用 or 多页面？

    写在前面:不要认为 EXTJS 高版本就是一个界面改良,在项目中,仍然用 N 张页面,在 N 张页面部署 EXTJS ．这种方式不用多讲,效率问题大家都看得出来, EXTJS 是一个集成开发工具,注定 ...

  4. ndk-stack 调试 android c++ 代码崩溃位置

    在android下面使用jni来调用c++,在开发游戏是非常正常的.但是要调试c++部分却是非常麻烦的问题.如果快速定位崩溃位置呢.NDK提供了一个小工具ndk-stack. 首先,我们先配置环境,把 ...

  5. SQL数据库文件修复/用友/金蝶/管家婆/速达/思讯数据库恢复 硬盘恢复

    硬盘的故障情况可以分为以下几类: 1.控制电路故障 大部分外电路的问题是电源芯片或主轴驱动芯片烧坏引起的,由于硬盘电路板质量问题.设计缺陷.市电波动.突然断电.芯片老化或者散热不良.静电等原因造成芯片 ...

  6. Spring Boot Web Executable Demo

    Spring Boot Web Executable Demo */--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre.sr ...

  7. spark Intellij IDEA开发环境搭建

    (1)创建Scala项目 File->new->Project,如下图 选择Scala 然后next 其中Project SDK指定安装的JDK,Scala SDK指定安装的Scala(这 ...

  8. 封装 INI 文件读写函数

    delphi读写ini文件实例 //--两个过程,主要实现:窗体关闭的时候,文件保存界面信息:窗体创建的时候,程序读取文件文件保存的信息. //--首先要uses IniFiles(单元) //--窗 ...

  9. Delphi实例之一个较复杂的记事本的实现

    http://www.mamicode.com/info-detail-110813.html delphi中控件位置及自动排版的问题 http://blog.csdn.net/avan_lau/ar ...

  10. 用控制台命令拉取git最新仓库代码

    C#利用Diagnostics  拉取最新代码  示例代码 static void DiagnosticTest() { Process p; ProcessStartInfo psi; psi = ...