Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

[CSS小技巧] 自适应的九宫格,元素等比缩放

  在水平方向的自适应实现起来很容易,只要对宽度设置百分比即可。但是垂直方向就没那么简单,九宫格是让所有元素保持正方形,也就是说垂直方向的高度要取水平方向自适应的值。但是别忘记了垂直padding是以宽度来计算的,于是我们可以使用padding来实现。
  下面是示例代码:
<style>
body {margin:0px;}
ul {padding:0px;}
li {
  list-style:none;
  background:red;
  width:calc(33.33% - 20px);
  padding-bottom:calc(33.33% - 20px);
  margin:10px;
  float:left;
}
</style>
<ul>
  <li></li><li></li><li></li>
  <li></li><li></li><li></li>
  <li></li><li></li><li></li>
</ul>

  这个方法解决也会带来一些问题。必须保证元素内没有高度才能做到让padding直接作为高度。所以此时如果元素内有内容的话就必须使用绝对定位,让它不撑开容器。上面的代码还偷了个懒,直接使用了calc,实际上不用这个,多嵌套一层元素也可以实现的。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^