前端开发中的多列布局实现方法
多列布局
多列布局在web前端开发中也是较为常见的,比如常见的三列、四列及以上,列的布局使得单一的页面可以展示更多分门别类的内容。这里会提到的多列布局有两列定宽加一列自适应、多列不定宽加一列自适应、多列等分三种。
两列定宽加一列自适应布局
本布局模式一共分为三列,其中两列宽度固定,一列宽度随内容宽度而改变。
两列定宽加一列自适应
本案例中每一列高度为自适应,即高度和内容高度一致,左列和中列宽度为100px,右列宽度为自适应,通过float浮动布局结合块级元素的特性来实现。需要注意的是背景颜色可以设置在p标签上,也可以设置在p标签上。
多列不定宽加一列自适应
这里讲解的案例为两列不定宽加一列自适应,高度自适应的布局方案,
此处多列不定宽加一列自适应
首先要理解的是不定宽,不定宽指的是列的宽度可以随时设定为其他值,这里我们可以将左列中列的宽度设置为任意值,也不会改变布局的模式,所以我们看到这个布局实现代码和上面的是一样的。需要注意的是不定宽与自适应的区别。
多列等分
多列等分布局是在页面中显示多列,这多列的宽度一致,间距一致,高度自适应,
多列等分布局简易实现
在父容器上设置margin-left为-20px,为父容器增加20px的宽度,在column容器上设置左浮动,并为每一个子容器设置宽度为父容器的25%,同时设置子容器padding-left为20px,显示方式为border-box(该现实方式显示的盒模型宽高为盒子宽高)。本方案通过将父容器宽度增加一个20px(间隔宽度),将间隔显示在子容器内部,将子容器设置为边框盒,从而实现等分布局。
本文只是列举了通过float来实现多列布局的方案,通过flex,table等也有相应的实现方案。
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是前端开发中的多列布局实现方法的详细内容,更多请关注其它相关文章!
下一篇: CSS与HTML使用误区
推荐阅读
-
Android自定义View设定到FrameLayout布局中实现多组件显示的方法 分享
-
用辅助列或VBA的方法实现在Excel中粘贴时跳过隐藏行
-
Excel中实现跨行合并把备注列扩展到K列的快速方法
-
JSP 开发中过滤器filter设置编码格式的实现方法
-
ASP.NET中GridView 重复表格列合并的实现方法
-
使用=号引用的方法来将Excel中多列内容合并成一列
-
使用CSS3实现多列布局与多背景的技巧
-
iOS开发中实现新闻图片的无限循环展示的方法
-
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
-
Apache2中实现多网站域名绑定的实现方法