[CSS]图片水平排列并且有固定间隔
来源:互联网 发布:知我者芈月也 编辑:程序博客网 时间:2024/06/05 10:45
相信大家肯定都碰到过这样的需求:
可能设计图是这样的
先来简单分析一下这里的几点要求
- 八张图片水平排列
- 图片之间固定间隔
- 图片大小相同
- 总宽度100%
demo
html
<div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div></div>
css
* {box-sizing: border-box;}.row .col { float: left; width: 12.5%; background-color: #0f0; border: 10px solid #fff;}
效果图
这样,以后如果要更改间距,只要更改
border-width
即可了
原理
- 最基本的一点,要设置盒子模型为border-box,这样就能保证每一个col的宽度计算方式为content+padding+border,就算设置了padding或者border也不会影响总宽度。
- 其次,用边框(padding也可以)模拟间距(给边框设置与row背景色相同的颜色)
1 0
- [CSS]图片水平排列并且有固定间隔
- CSS大小不固定的图片和多行文字的垂直水平居中
- CSS实战技巧:图片(大小不固定)的水平垂直居中
- 排列图片IE 3px间隔
- CSS固定图片位置
- CSS控制DIV水平并且垂直居中
- css 图片有间隔多个Img标签之间的间隙
- css 图片排列
- css 图片排列
- 取有任意固定间隔符的String
- swing中JList控件使用:每一项以 图片+文字(文字在图片的下面) 的形式显示并且在水平方向排列
- 图片水平垂直居中css
- CSS固定背景的图片
- Android 图片固定时间间隔抖动并播放音效
- css 去掉两个图片之间间隔
- CSS图片之间间隔消除办法
- 图片错位有间隔终极解决方案
- 图片上下排列3px间隔的消除方法
- 《计算机是怎样跑起来的》读书笔记
- Unity3D 学习笔记2——“工具在手,天下我有”
- mkdir命令详解
- CDH版本 HDFS NFS Gateway 无法启动、挂载失败问题
- 关于Android TouchDelegate源码解析
- [CSS]图片水平排列并且有固定间隔
- ClouderaManager安装hive后执行sql时写hdfs无权限
- String 转 BigDecimal
- setDescendantFocusability,在父View和子View间处理焦点关系
- Android popupwindow 随笔
- 静态链表的学习
- 从头到尾彻底理解KMP
- 如何检查百度统计安装是否成功---js引用版
- python学习001