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 条评论
登录 后参与评论

相关文章

来自专栏Flutter入门到实战

Android适配全面总结(一)----屏幕适配

版权声明:本文为博主原创文章(部分引用他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/7aa34434ad...

1274
来自专栏非著名程序员

Android字体大小怎么自适应不同分辨率?

今天有人问我,android系统不同分辨率,不同大小的手机,字体大小怎么去适应呢?其实字体的适应和图片的适应是一个道理的。 一、 原理如下: 假设需要适应320...

2498
来自专栏DannyHoo的专栏

替代图片+文字按钮问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

832
来自专栏24K纯开源

Qt Style Sheet实践(三):QCheckBox和QRadioButton

导读       单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素。单选按钮只允许用户在一组选项中选择一个,且当其中一个...

5466
来自专栏别先生

jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

jQuery EasyUI学习网址:http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html jQuer...

46410
来自专栏青青天空树

认识基本的mfc控件

  几乎可以在每个windows程序中都看到按钮、复选框、文本框以及下拉列表等等,这些都是控件。而且很多常用的控件已经内置到操作系统当中了,在Visual C+...

762
来自专栏lzj_learn_note

前端开发学习──初识Html

type:disc默认 实心小圆圈;square 小方块;circle 空心小圆圈

992
来自专栏V站

自适应丨Html5响应式(自适应)网页设计

viewport是网页默认的宽度和高度, 上面这行代码的意思是:网页宽度默认等于屏幕宽度(width=device-width), 原始缩放比例(initia...

2415
来自专栏Scott_Mr 个人专栏

React Native 系列(九) -- Tab标签组件

4129
来自专栏三木的博客

HTML概要

HTML CSS Javascript 的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。 CSS...

2199

扫码关注云+社区