web前端开发中常见的多列布局解决方案整理(一定要看)


Posted in Javascript onOctober 15, 2017

多列布局

多列布局在web前端开发中也是较为常见的,比如常见的三列、四列及以上,列的布局使得单一的页面可以展示更多分门别类的内容。这里会提到的多列布局有两列定宽加一列自适应、多列不定宽加一列自适应、多列等分三种。

两列定宽加一列自适应布局

本布局模式一共分为三列,其中两列宽度固定,一列宽度随内容宽度而改变。简易实现代码如下:

web前端开发中常见的多列布局解决方案整理(一定要看)

两列定宽加一列自适应

本案例中每一列高度为自适应,即高度和内容高度一致,左列和中列宽度为100px,右列宽度为自适应,通过float浮动布局结合块级元素的特性来实现。需要注意的是背景颜色可以设置在p标签上,也可以设置在div标签上。

多列不定宽加一列自适应

这里讲解的案例为两列不定宽加一列自适应,高度自适应的布局方案,简易实现代码如下:

web前端开发中常见的多列布局解决方案整理(一定要看)

此处多列不定宽加一列自适应

首先要理解的是不定宽,不定宽指的是列的宽度可以随时设定为其他值,这里我们可以将左列中列的宽度设置为任意值,也不会改变布局的模式,所以我们看到这个布局实现代码和上面的是一样的。需要注意的是不定宽与自适应的区别。

多列等分

多列等分布局是在页面中显示多列,这多列的宽度一致,间距一致,高度自适应,简易实现代码如下:

web前端开发中常见的多列布局解决方案整理(一定要看)

多列等分布局简易实现

在父容器上设置margin-left为-20px,为父容器增加20px的宽度,在column容器上设置左浮动,并为每一个子容器设置宽度为父容器的25%,同时设置子容器padding-left为20px,显示方式为border-box(该现实方式显示的盒模型宽高为盒子宽高)。本方案通过将父容器宽度增加一个20px(间隔宽度),将间隔显示在子容器内部,将子容器设置为边框盒,从而实现等分布局。

本文只是列举了通过float来实现多列布局的方案,通过flex,table等也有相应的实现方案。

总结

以上所述是小编给大家介绍的web前端开发中常见的多列布局解决方案整理,希望对大家有所帮助!

Javascript 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
react的hooks的用法详解
Oct 12 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Vue 2.0入门基础知识之内部指令详解
Oct 15 #Javascript
JS中的多态实例详解
Oct 15 #Javascript
vue跨域解决方法
Oct 15 #Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 #Javascript
详解 vue.js用法和特性
Oct 15 #Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 #jQuery
JS简单实现数组去重的方法分析
Oct 14 #Javascript
You might like
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python如何实现代码检查
2019/06/28 Python
Python3内置模块random随机方法小结
2019/07/13 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
销售简历自我评价
2014/01/24 职场文书
教师群众路线心得体会
2014/11/04 职场文书
2014年妇联工作总结
2014/11/21 职场文书
干部个人考察材料
2014/12/24 职场文书
今日说法观后感
2015/06/08 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
实操Python爬取觅知网素材图片示例
2021/11/27 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis
Python如何加载模型并查看网络
2022/07/15 Python