html表格列平分行,CSS布局问题 , 如何实现一行多列div,类似于表格
水平拆分方案A:百分比宽度+float
可以全浏览器兼容,但是需要用到一些hack解决float定位的问题,同时需要考虑清除浮动。
在很多比例(1/3、2/3是最常见的情形)不能整除的情况下,在一些情形下出现1px的误差。
水平拆分方案B:百分比宽度+不带间隙的inline-box
缺点同上。hack量和方案A不相上下。
额外的好处是有很多vertical-align方式可以指定,额外的坏处是很多vertical-align的属性值对于各个浏览器来说都不一样。最常见的vertical-align还是middle和baseline,顶多再加个top和bottom。
水平拆分方案C:表格
用表格当然是全浏览器支持的选择。
水平拆分方案D:display属性代替表格
用display:table和display:table-cell等属性替代表格,以兼顾语义。IE8+和现代浏览器支持。
更多前瞻属性……
使用css3的新特性calc来计算值 + float/inline-box
使用flexbox
下面介绍bootstrap的一套可复用的方案,这套方案是从方案A发展而来,主题思想是抽取出布局中可以复用的类。
一个常见的列拆分如下:
...
bootstrap的栅格系统的核心,即是使用这样的一个三层结构,最内层使用width来分配100%的父级宽度。
对于单列的类名规则是:col-[lg/md/sm/xs]-[1~12]。详情见bootstrap栅格选项。
中间的变量跟响应式media查询有关,这里不详细解释。最后一个值x,既等分父容器的1/12乘以x。如下:
.col-md-3 { float:left; }
@media (min-width: 992px) {
.col-md-3 { width: 25%; }
/* 父级容器的3/12 */
}
在bootstrap栅格系统中,每个col之间都有30px间隙,如何做到等分间隙呢?见如下CSS属性:
/* 列容器设置左右padding */
.col-md-3 {
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/* 行容器设置负margin撑开 */
.row {
margin-right: -15px;
margin-left: -15px;
}
/* 行容器清理浮动 */
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
/* container再补完被row挖去的15px */
.container {
padding-right: 15px;
padding-left: 15px;
}
等等,是不是有哪里不对?计算一下宽度:
每一个col-md-3的最终宽度 = 父容器宽度 * 25% + 15px * 2 (padding宽度) + 0 (border宽度)
怎么会每个都1/4等分父容器呢?
还有这个属性在作用:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
bootstrap使用*来选取所有元素(这是我对bootstrap感到厌烦的原因,为了开发效率,牺牲选择器效率),并强制使用border-box计算宽度,因而达到了布局上的大和谐这样的计算公式:
父容器宽度 * 25% = 每一个col-md-3的最终宽度 + 15px * 2 (padding宽度) + 0 (border宽度)
这样做以后,可以很方便地拿出对应的类来使用,也可以级联,类似于row-col-row-col-row-col……
div.container
h1 test
div.row
div.col-sm-6
div.row
div.col-sm-6
img(data-src="holder.js/100%x180")
div.col-sm-6
img(data-src="holder.js/100%x180")
div.col-sm-6
div.row
div.col-sm-3
img(data-src="holder.js/100%x180")
div.col-sm-9
img(data-src="holder.js/100%x180")
(上面用了jade的语法展示层级,和bootstrap的holder.js来补充一个img元素以展示效果)。效果如下:
bootstrap方案的适用面是IE8+及其他现代浏览器,在这个方案中,主要的问题在于box-sizing属性的兼容性,小瑕疵是百分比宽度带来的±1px误差的问题。
html表格列平分行,CSS布局问题 , 如何实现一行多列div,类似于表格相关推荐
- 行列式性质之任意行(列)的任意倍数加到另一行(列),行列式不变
行列式性质 将任意一行或者列的任意倍数加到另一行(列),其行列式不变 理解: 就是将面积或者是体积平推一定的位置,平推平移又不会改变行列式的大小
- html5栅格化,Layui删格化布局5等份(一行5列)
非常喜欢Layui前端框架,代码简洁好用,特别是删格化布局,非常灵活,Layui将容器进行了 12 等分,预设了 4*12 种 CSS 排列类. 可以实现一行2个,3个,4个,6个,但就是不能一行5个 ...
- html如何设置三列列宽相等,CSS分割宽度100%到3列
我认为在CSS中不存在完美的1/3. 我个人会这样做 #c1, #c2 { width: 33%; // 1/3 of 100% } #c3 { width: auto; //or width:34% ...
- 使用DIV+CSS布局设计个人主页 设计个人主页,使用DIV+CSS的方式进行页面布局。
(1)构思个人主页的版面布局: (2)使用DIV+CSS技术设计出构思好的个人主页. 先来看看效果: <!DOCTYPE html> <html lang="zh" ...
- 最强大的 CSS 布局 —— Grid 布局
Grid 布局是什么? Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小.位置.层次等关系.号称是最强大的的 CSS 布局方案,是目 ...
- 微信小程序7__一行3 列的布局
要实现以下效果: 在index.wxml中增加以下布局代码 <!--以下为一行3列 布局, 显示最新通知布局: 左图标 中间文字 右侧图标--><view class="w ...
- excel多列多行堆叠成多列一行,(excel把一行多列数据转成几行几列的表格)excel多列数据合并成一列...
怎么将excel中两列转换成多行多列 在G1 H1中分入或复制粘列公 =INDEX(A:A,INT(ROW(A4)/4)) =INDIRECT(ADDRESS(INT(ROW(A4)/4),MOD(R ...
- CSS使用浮动属性和边距设计3行3列定宽的布局实例
CSS使用浮动属性和边距设计3行3列定宽的布局 下面使用CSS的浮动属性和边距属性设计一个简单地3行3列并且是固定宽度的布局页面. 实例 设计步骤如下: 1. 制作3行3列定宽布局的XHTML部分.源 ...
- el-table中每列设置同样的宽度导致表格宽度没法实现100%布局
场景 el-table中表格宽度无法实现100%布局. 原因是el-table中每列el-table-column都设置了宽度,这里宽度都为150 注: 博客: https://blog.csdn.n ...
最新文章
- linux kernel devel和kernel source的区别
- 【剑指offer】面试题 5. 替换空格
- 2021阿里巴巴研发效能峰会来啦!
- Nginx教程-日志配置
- CodeForces - 1419E Decryption(质因子分解+构造)
- mysql8 grant语法失效
- html5 绘制图形,HTML5绘制几何图形
- 用ASP.NET Core构建可检测的高可用服务--学习笔记
- 运算器为计算机提供了计算与逻辑,【单选题】运算器为计算机提供了计算与逻辑功能,因此称它为()....
- iPad加价抢购,iPhone 11面临缺货,苹果的供应链困局来了
- 【全自动网盘扩容软件使用教程】百度网盘自助无限扩容+自助无限修复软件使用步骤说明
- ios android与wp,在iOS与Android间选择WP
- 从 git 的历史记录中彻底删除文件或文件夹
- 什么TO B类销售 TO B这个行业的销售好做吗
- 怎么将两段视频合并在一起?快速操作技巧
- 电脑桌面显示白色图标无法删除
- java poi 操作Excel 删除行内容和直接删除行
- AWVS安装(Windows)
- 7000字详解数据指标体系建设实践
- 电力电子技术总结-电力电子器件2
热门文章
- 【Elasticsearch】检查您的 Elasticsearch 分片
- 40-400-030-运维-优化-MySQL入门调优脚本tuning-primer的使用
- 【java】高并发之限流 RateLimiter使用
- 【Kafka】Kafka BrokerEndPointNotAvailableException: End point with security protocol PLAINTEXT not
- kerberos安装配置与使用
- spark学习-74-源代码:Endpoint模型介绍(6)-Endpoint的消息的接收
- 95-260-055-源码-检查点-Savepoint 和 Checkpoint的异同
- flink 1.9.0 编译:flink-shaded-hadoop-2 找不到
- 15-Scala使用Option、Some、None,避免使用null
- Portainer 安装与使用