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 IE 浏览器判定代码
Mar 21 Javascript
JQuery 文本框使用小结
May 22 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
vuex如何重置所有state(可定制)
Jan 17 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
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
discuz Passport 通行证 整合笔记
2008/06/30 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
php 数据结构之链表队列
2017/10/17 PHP
PHP7 windows支持
2021/03/09 PHP
javascript this用法小结
2008/12/19 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python socket 超时设置 errno 10054
2014/07/01 Python
python实现Floyd算法
2018/01/03 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
全球最大的服务市场:Fiverr
2017/01/03 全球购物
文秘专业毕业生就业推荐信
2013/11/08 职场文书
夜大毕业生自我评价分享
2013/11/10 职场文书
工作个人的自我评价
2014/01/14 职场文书
学术诚信承诺书
2014/05/26 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
五好家庭申报材料
2014/12/20 职场文书
计算机专业自荐信范文
2015/03/26 职场文书