失言就是一不小心说了实话 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

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;
}

相关推荐

添加新评论

网站状态

  • 栏目分类:35个
  • 发布文章:1109篇
  • 用户评论:620条

最新回复

  • 香港服务器: 很详细,学习了
  • memory: 对,这个密钥最好是自己换一下。当然不嫌麻烦甚至可以考虑将密钥做到...
  • 小明明: 在加密的时候 秘钥固定不就可以机密了吗
  • 上海代理记账: 看起来代码有一些复杂的呀。。。
  • 香港云服务器: 站长不错,不错的干货
  • yet handsome: 我看了你的这个发现历史真的是惊人的相似,我们已经做到redis集...
  • memory: 好久不玩它们了,我的相关知识来自谷歌...
  • 于小鱼: 你好,想请教一些关于xen和kvm的问题。
  • memory: 如果将图片 base64_encode 后,再想取回以前的路径不...
  • 陈凌风: 我要区正常的路径显示怎么办?
  • genuiner: 牛逼
  • haitongz: 赞
  • memory: php64位? 这个我还真没有注意。。。回头再试试
  • Kngstr: 这个很简单,你用的PHP不是64位的,64位的dll只能在64位...
  • memory: 使用的是typecho.
  • GavinHsueh: 您好,我了解下您的博客是自己开发的么?看着很不错
  • 个人博客: 看看先
  • memory: 谢谢,已修正。
  • jrotty: 方法一中next后面少个'符号
  • daxia: mark