专栏首页IMWeb前端团队css经典布局之左侧固定大小右侧自动适应

css经典布局之左侧固定大小右侧自动适应

最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的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=flag ? "收起" : "展开";
};

点击查看效果 查看完整代码

其实这只是简单的封装,你可以使用jQuery加入动画,还可以写成jQuery插件等。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css经典布局之左侧固定大小右侧自动适应

    最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会...

    IMWeb前端团队
  • Android 浏览器文本垂直居中问题

    在开发中,我们常使用 line-height 属性来实现文本的垂直居中,但是在安卓浏览器渲染中有一个常见的问题,就是对于小于12px的字体使用 line-hei...

    IMWeb前端团队
  • 移动端重构实战系列6——icon与图片

    本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 ”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sand...

    IMWeb前端团队
  • css经典布局之左侧固定大小右侧自动适应

    最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会...

    IMWeb前端团队
  • 如何理解模块、组件和对象

    模块、组件和对象这三个名词,是软件开发中非常常见的说法。在很多软件平台、库、框架中,都使用这三个名词作为描述其复杂结构的单元结构。模块、组件、对象三者虽然有相似...

    韩伟
  • OpenCL超级计算研讨会总结

    2015元宵隔天,也是北京两会热烈提案期间,由美商AMD、港商蓝宝石科技、景丰电子于深圳北方大厦举办“GPU/OpenCL并行计算大趋势”研讨会,吸...

    GPUS Lady
  • IT行业技术人员的核心竞争力

    本文作者从一个IT老兵的角度,讲讲自己对于IT行业的技术人员核心竞争力的看法。此处说的IT技术人员就是engineer(以开发为例)。立意在于普通员工。是作者从...

    叶锦鲤
  • 谈谈em的用法和在创建移动页面的作用

    首先;我们需要知道的是,对于在移动设备上运行的网址或应用程序来说,像素不能作为尺寸单位。正确的做法是根据游览器来使用ems或百分比作为单位。

    用户5997198
  • input file上传文件改变默认样式

    我们知道,在使用到input file上传文件的时候,会出现这样很丑的默认样式,作为前端开发的我们,主要责任就是去优化这些样式,以更美观的方式呈现出来,但是,...

    王小婷
  • Nginx的优化配置

    Nginx相关的内容有点延迟,趁着今天有空就给大家整理完,本篇文章来给大家把Nginx我们在工作中常用的配置来给大家分享下,希望能对大家有所帮助。

    用户4919348

扫码关注云+社区

领取腾讯云代金券