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 相关文章推荐
jquery提升性能最佳实践小结
Dec 06 Javascript
分页栏的web标准实现
Nov 01 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 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
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
js单词形式的运算符
2014/05/06 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python编程使用协程并发的优缺点
2018/09/20 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
出纳的岗位职责
2013/11/09 职场文书
党员大会主持词
2014/04/02 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers