忙于采集的蜜蜂,无暇在人前高谈阔论 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

div+css按比例布局:宽度为百分比高度自动等比正方形的实现方式

前端设计 memory 发布于May 15, 2017 标签: CSS

第一种方案
效果


css文件

body {
  width: 100%;
  font-size: 0;
  text-align: center;
}
div {
  display: inline-block;
  width: 20%;
  background: green;
  font-size: 12px;
  position: relative;
  vertical-align: middle;
}
div:nth-child(2n) {
  background: orange;
}
div:before {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
  width: .1px;
  vertical-align: middle;
}
div span {
  display: inline-block;
  vertical-align: middle;
  font-size: 4em;
  color: #fff;
}

html文件

<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div><span>10</span></div>

第二种简约方案,不过这种方案,内容可能需要相对定位来处理一下。

div {
  width:30%;
  height: 0;
  padding-bottom:30%;
  background:green;
}

相关推荐

添加新评论

网站状态

  • 栏目分类:49个
  • 发布文章:1512篇
  • 用户评论:729条
  • 开博至今:4069天

正则速查

[abc] 匹配中括号中的单个字符,如a或b或c
[^abc] 匹配除了a、b、c等字符的其他单个字符
[a-z] 匹配一个字符范围,如a到z
[a-zA-Z] 匹配一个字符范围,如a-z 或 A-Z
^ 匹配行的开始
$ 匹配行的结束
\A 匹配一个字符串的开始
\z 匹配一个字符串的结束
. 匹配任意单个字符
\s 匹配空白字符,如空格,TAB
\S 匹配非空白字符
\d 匹配一个数字
\D 匹配非数字
\w 匹配一个字母
\W 匹配非字母
\b 匹配字符边界
(...) 引用所有括号中的内容
(a|b) a或者b
a? 零个或1个a
a* 零个或多个a
a+ 1个或多个a
a{3} 3次重复的a
a{3,} 3次或3次以上重复的a
a{3,6} 3到6次重复的a

修正符

/g 查找所有可能的匹配
/i 不区分大小写
/m 多行匹配
/s 单行匹配
/x 忽略空白模式
/e 可执行模式,PHP专有
/A 强制从目标字符串开头匹配
/D 使用$限制结尾字符,则不允许结尾有换行
/U 只匹配最近的一个字符串;不重复匹配

最新回复

  • 夏目贵志: 我终于懂了是什么意思了!!!
  • 柳溪: 支持博主 很详细!
  • memory: 谢谢。以前没用到checkEmail,是注释掉的,所以这儿我也没...
  • 一个默默无闻的码农: function checkEmail的if里的变量写错了
  • memory: 谢谢大神鼓励。哈哈 有没想到的地方还望多多指正
  • 梦康: 感谢分享,前几天我刚接触这个命令,之前都没用到过。总结非常全面。
  • 梁兴健: Parse error: syntax error, unexp...
  • 耐火砖: 感谢博主分享,很有用
  • memory: 额。。。
  • 亚克力浴缸: 还好我不是学这些的,不然打错那个都不知道
  • memory: 哈哈。写的太2了,将就着吧。我自己看也晕了...
  • 亚克力浴缸: 看晕了,头大
  • 泽泽: 至少手机上图根本没动
  • memory: 呵呵,难道你现在看到的不是gif图?
  • 泽泽: 原文是gif图,无脑抓取也要读一读吧
  • 亚克力浴缸: 学习了 in 参数
  • asd: 感谢博主,功能已实现