web前端开发中常见的多列布局解决方案整理(一定要看)
多列布局
多列布局在web前端开发中也是较为常见的,比如常见的三列、四列及以上,列的布局使得单一的页面可以展示更多分门别类的内容。这里会提到的多列布局有两列定宽加一列自适应、多列不定宽加一列自适应、多列等分三种。
两列定宽加一列自适应布局
本布局模式一共分为三列,其中两列宽度固定,一列宽度随内容宽度而改变。简易实现代码如下:
两列定宽加一列自适应
本案例中每一列高度为自适应,即高度和内容高度一致,左列和中列宽度为100px,右列宽度为自适应,通过float浮动布局结合块级元素的特性来实现。需要注意的是背景颜色可以设置在p标签上,也可以设置在div标签上。
多列不定宽加一列自适应
这里讲解的案例为两列不定宽加一列自适应,高度自适应的布局方案,简易实现代码如下:
此处多列不定宽加一列自适应
首先要理解的是不定宽,不定宽指的是列的宽度可以随时设定为其他值,这里我们可以将左列中列的宽度设置为任意值,也不会改变布局的模式,所以我们看到这个布局实现代码和上面的是一样的。需要注意的是不定宽与自适应的区别。
多列等分
多列等分布局是在页面中显示多列,这多列的宽度一致,间距一致,高度自适应,简易实现代码如下:
多列等分布局简易实现
在父容器上设置margin-left为-20px,为父容器增加20px的宽度,在column容器上设置左浮动,并为每一个子容器设置宽度为父容器的25%,同时设置子容器padding-left为20px,显示方式为border-box(该现实方式显示的盒模型宽高为盒子宽高)。本方案通过将父容器宽度增加一个20px(间隔宽度),将间隔显示在子容器内部,将子容器设置为边框盒,从而实现等分布局。
本文只是列举了通过float来实现多列布局的方案,通过flex,table等也有相应的实现方案。
总结
以上所述是小编给大家介绍的web前端开发中常见的多列布局解决方案整理,希望对大家有所帮助!
您可能感兴趣的文章:
- WEB前端开发常见的布局方法
- WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
- web前端开发必备压缩工具整理
- WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
- WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
- Web前端开发工程师常用技术网站整理
- web前端开发——网页布局显示错位的可能原因(shift+F6重命名快捷键的使用注意)
- WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
- web前端开发工具整理
- WEB前端开发规范整理
- WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
- WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
- 互联网公司Web前端常见面试题目整理汇总
- WEB前端开发工具--整理
- Web前端开发之“常见模块你真的很了解吗?”
- 移动web前端开发,隐藏浏览器地址栏(全屏)解决方案
- 移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签
- 收集整理来自网络上的一些常见的 前端、H5面试题 前端开发面试题
- Web前端开发之“常见模块你真的很了解吗?”
- 基于webpack的前端工程化开发解决方案探所