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

编程学习 2021-07-04 17:32www.dzhlxh.cn编程入门
多列布局在web前端开发中也是较为常见的,今天长沙网络推广给大家介绍这里会提到的多列布局有两列定宽加一列自适应、多列不定宽加一列自适应、多列等分三种,感兴趣的朋友一起看看吧

多列布局

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

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

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

两列定宽加一列自适应

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

多列不定宽加一列自适应

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

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

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

多列等分

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

多列等分布局简易实现

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

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

总结

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

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板