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 相关文章推荐
Javascript this指针
Jul 30 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
require.js的用法详解
Oct 20 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
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
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
网站上面有这种切换效果
2006/06/26 Javascript
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
python实现电子书翻页小程序
2019/07/23 Python
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
电气工程师岗位职责
2014/01/01 职场文书
员工拓展培训方案
2014/02/15 职场文书
《1942》观后感
2015/06/08 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL