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

    题目描述 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱 输入输出格式 输入 ...

  2. bzoj4010: [HNOI2015]菜肴制作【拓扑排序】

    想到了一个分治方法,每一次尽量放小的那个,把它依赖的放在左边,不依赖的放在右边. TLE 80: #include <bits/stdc++.h> #define rep(i, a, b) ...

  3. asp.net-mvc验证码 asp.net-mvc c#验证码

    验证码看不清换一组 写一个类 public class ValidateCode { public ValidateCode() { } /// <summary> /// 验证码的最大长 ...

  4. iOS开发者的福利 — — iOS9+Xcode7免越狱免证书直接调试

    苹果发布Xcode7后, 开放了普通的AppleID也能真机调试( 非$99 或 $299, 只要能上AppStore下载应用的AppleID就行),下面教你具体做法,很简单的. 1.运行Xcode, ...

  5. innodb系统表空间维护

    环境说明: 有一个在运行中的mysql环境,由于之前的配置文件设置的过于简单(没有配置innodb_data_file_path变更):造成现在系统表空间已经满了 如果innodb_data_file ...

  6. [MySQL]mysql指定路径启动

    /usr/sbin/mysqld --defaults-file=/etc/mysql/my.cnf --basedir=/usr --datadir=/var/lib/mysql --pid-fil ...

  7. css3快速复习

    选择器边框.阴影 border-radius: 50%; 设置正圆形背景的改变CSS3重要的新东西: ● transition 过度,让一个元素从一个样式,变为另一个样式,不再是干蹦了,而是有动画,均 ...

  8. 把div 当文字来进行布局控制

    两边对齐 text-align: justify; text-justify: distribute-all-lines;/*ie6-8*/ text-align-last: justify;/* i ...

  9. ZOJ 1108 & HDU 1160 - FatMouse's Speed

    题目大意:给你n只老鼠的体重w和速度s,让你找出最长的子序列使得w[i] < w[j] 且 s[i] > s[j] (i < j).求最长序列的长度并输出该序列. LIS(Longe ...

  10. ubuntu 15.10安装搜狗输入法不能打开

    安装Linux是为了更好的做开发,而开发其实不需要输入中文的,然而 在大中国的环境下,电脑没有中文输入法是不行的... 这次装ubuntu 坚持了4天没有中文输入法,我能说,其实没有中文输入法貌似也没 ...