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

多列布局

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

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

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

两列定宽加一列自适应

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

多列不定宽加一列自适应

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

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

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

多列等分

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

多列等分布局简易实现

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

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

总结

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

(0)

相关推荐

  • Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象 让我们先举个栗子,最直观的说明一下这个 BUG 的现象. 常规的 fixed 布局,可能使用如下布局(以下仅示意代码) <body> <!-- fixed定位的头部 --> <header

  • web标准布局实例教程,用定位轻松解决CSS复杂布局

    我相信来经典论坛学习标准的朋友,99%都不是为了进W3C,不是为了成为专业的研究人员,那么大家来的目的是什么呢?很简单,其实都是想通过标准的学习让自己多增加一项技能而已,让自己在找工作的时候不会在被"需要熟练掌握web标准"而难倒,在下面的实例中xhtml并没有什么语意,文章的目的只是让然大家能更好的掌握CSS中相对.绝对定位的用法(新手问此问题的确实很多),及如何有效的结合背景,实现比较复杂的布局.不足之处还望前辈们能指点一二,感谢! ------------------------

  • 用标准件的方式来组装网页DIV布局-WEB标准网站设计心得

    有这样一个想法,不知道可行么 例子: 布局中的左栏,它的属性有:{居左,宽度,背景色,字体等等} 如果把每个属性都做成一个标准件,然后这样组装起来使用 class="float width height background font padding....",通过多个class的标准件的引用来完成页面布局样式 先按需要定义好标准件如: float标准件 .l{float:left} .r{float:right} .cl{clear:left} ... width标准件 .w200{

  • WEB标准网页布局中尽量不要使用的HTML标签

    Do not use these html elements in html pages. Presentational elements should not be used. Support for some elements has been (or will be) deprecated; they should not be used. Don't Use These Tags Presentational b big hr i small sub sup tt Deprecated

  • 简要了解jQuery移动web开发的响应式布局设计

    响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计.这意味着,无论用户是在移动.平板还是桌面设备上浏览 Web 页面,设计都将根据该设备的屏幕分辨率显示特定的布局,从而适当地响应设备. 该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计.对不同屏幕分辨率的反应方式. 没有自定义样式,我们的电网将3列的布局在所有的屏幕宽度: 在我们的自定义样式,我们希望此网格叠加在狭窄的宽度,然后切换到一个标准的3栏布局.在很宽的屏幕宽度,我们

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

    多列布局 多列布局在web前端开发中也是较为常见的,比如常见的三列.四列及以上,列的布局使得单一的页面可以展示更多分门别类的内容.这里会提到的多列布局有两列定宽加一列自适应.多列不定宽加一列自适应.多列等分三种. 两列定宽加一列自适应布局 本布局模式一共分为三列,其中两列宽度固定,一列宽度随内容宽度而改变.简易实现代码如下: 两列定宽加一列自适应 本案例中每一列高度为自适应,即高度和内容高度一致,左列和中列宽度为100px,右列宽度为自适应,通过float浮动布局结合块级元素的特性来实现.需要注

  • WEB 前端开发中防治重复提交的实现方法

    web前端数据请求或者表单提交往往通过对dom的点击事件来操作,但是往往因为认为点击过快(少年手速挺快的嘛),或者因为响应等待使得用户误人为没操作而重复很多次点击,造成表单数据的连续重复提交,造成用户体检的不好,甚至影响到整个系统的安全性.而前端的防治重复提交至少很有效的防治了人为正常操作下的很多不必要麻烦.下面就来讲讲如何有效避免前端的表单重复提交 表单提交有以下几种方式: <form name="form" method="post" action=&qu

  • 阿里前端开发中的规范要求

    目录 1.命名规范 1.1  项目命名 1.2  目录命名 1.3 JS .CSS .SCSS .HTML .PNG  文件命名 1.4  命名严谨性 2.HTML规范 2.1 HTML  类型 2.2  缩进 2.3  分块注释 2.4  语义化标签 2.5  引号 3 CSS  规范 3.1  命名 3.2  选择器 3.3  尽量使用缩写属性 3.4  每个选择器及属性独占一行 3.5  省略 0  后面的单位 4 Javascript  规范 4.1  命名 4.2  代码格式 4.3

  • 十个免费的web前端开发工具详细整理

    十个免费的web前端开发工具 网络技术发展迅速,部分技术难以保持 每年都有新的工具出现,这同时也意味着许多旧的工具倒在了新技术的发展之路上. 前端开发占据了web很大一部分,而且也成为了一种职业路径.如果你将前端开发当做自己的又一新技术或者作为一个可发展事业,你需要为这个工作准备合适的工具. 我将要分享我的十大现代必备的前端开发工具.它们都完全免费而且大多数工具能帮助你建立令人惊叹的网站. 1. Grid Guide 特性: 快速生成栅格 首先我要介绍的是Grid.Guide,一款免费的网页应用

  • Web前端开发工具——bower依赖包管理工具

    Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过 Bower 来管理模块间的这种联系. 包管理工具一般有以下的功能: a)注册机制:每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配,所以包管理工具需要维护注册信息,可以依赖其他平台. b)文件存储:确定文件存放的位置,下载的时候可以找到,当然这个地址在网络上是可访问的. c)上传下载:这是工具的主要功能,能提高包使用的便利性.比如想用 jqu

  • asp.net开发中常见公共捕获异常方式总结(附源码)

    本文实例总结了asp.net开发中常见公共捕获异常方式.分享给大家供大家参考,具体如下: 前言:在实际开发过程中,对于一个应用系统来说,应该有自己的一套成熟的异常处理框架,这样当异常发生时,也能得到统一的处理风格,将异常信息优雅地反馈给开发人员和用户.我们都知道,.net的异常处理是按照"异常链"的方式从底层向高层逐层抛出,如果不能尽可能地早判断异常发生的边界并捕获异常,CLR会自动帮我们处理,但是这样系统的开销是非常大的,所以异常处理的一个重要原则是"早发现早抛出早处理&q

  • 基于jQuery实现多标签页切换的效果(web前端开发)

    这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,html和css代码如下: <ul id="tab"> <li id="tab1" onclick="show(1)">10元套餐</li> <li id="tab2" onclick=&quo

  • web前端开发JQuery常用实例代码片段(50个)

    本文给大家展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西. 1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下

  • Web前端开发之水印、图片验证码

    一.水印 1.画布 System.Drawing.Image img = System.Drawing.Image.FromStream(FileUpload1.FileContent); 2.创建绘制对象,告诉它往哪张图片上绘制 Graphics g = Graphics.FromImage(img); 3.绘制的内容 string s = www.itnba.com; 4.绘制的字体 Font f = new Font("黑体",130); 5.绘制的画刷 Brush b = ne

  • Python Web后端开发中的增查改删处理

    目录 前言 一.创建 mgr应用目录 二.添加处理请求模块 和 url 路由 2.1定义函数 1.新建customer文件,定义dispatcher函数 2.总路由文件 bysms/urls.py 中定义 3.mgr下添加 urls.py 路由文件 三.列出客户 四.添加客户 五.临时取消 CSRF 校验 六.修改客户信息 七.删除客户 八.和前端集成 前言 如果采用前后端分离的架构开发, 后端几乎不负责任何展现界面的工作,只负责对数据进行管理 . 数据的管理,主要就是:响应前端的请求, 对数据

随机推荐