最近学习了一种经典布局，固定左侧或右侧的宽度，另一侧自适应宽度，此种布局挺常用，尤其是像后台，大部分都是采用这种结构，还比如像订餐类的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. 在阿里云ECS（CentOS6.5）上安装mysql

    首先查看服务器上是否已经安装过mysql 命令: rpm -qa | grep mysql 结果: 可以看到ECS上已经有mysql-libs这个包了.这并不影响安装. 查看yum服务器上提供的mys ...

  2. POJ 2609 Ferry Loading

    双塔DP+输出路径. 由于内存限制,DP只能开滚动数组来记录. 我的写法比较渣,但是POJ能AC,但是ZOJ依旧MLE,更加奇怪的是Uva上无论怎么改都是WA,其他人POJ过的交到Uva也是WA. # ...

  3. innodb引擎redo文件维护

    如果要对innodb的redo日志文件的大小与个数进行调整可以采用如下步骤: 1.关闭mysql mysqladmin -h127. -P3306 -uroot -p shutdown 2.修改配置文 ...

  4. org.springframework.data.mapping.PropertyReferenceException: No property created found for type

    错误原因:org.springframework.data.domain.SortSort sort=new Sort(Sort.Direction.DESC,"created_time&q ...

  5. INSTALL_FAILED_UPDATE_INCOMPATIBLE

    安装apk的时候,报错. 解决:把所有这个apk的相关信息删除干净,隐藏较深的是设置->应用管理->这个应用的相关信息删除干净就可以了

  6. PreparedStatement接口

    从实际来讲,Statement现在已经不使用了,他已经称为了历史. Statement执行关键性问题在于他需要一个完整 的字符串定义要使用的SQL语句,而PreparedStatement可以动态的设 ...

  7. jdk1.8中的for循环

    jdk1.8 从语法角度,感觉发生的变化还是蛮大的.在此记录一下. for 循环 public static void main(String[] args) { List<Animal> ...

  8. zip-auto.sh

    #!/bin/sh #auto zip package #Define Path #####test######### mkdir -p /root/shell/test1 /root/shell/t ...

  9. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  10. YII 1.0 设置关联模型

    在model中设置如下 /* * 设置关联 */ public function relations(){ return array( 'cate'=>array(self::BELONGS_T ...