方法一:
效果:
说明:
1、将盒子的宽度设置为自己需要的百分比,这里以 16% 为例;
2、将盖盒子的高度设置为 100%;
3、通过伪类控制高度
ul li::before{ content: ""; padding-top: 100%; vertical-align: middle; display: block;}
4、盒子里面的内容一定要定位,如例子中的 span
ul li span{ position: absolute; top: 50%; left: 50%; webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
5、这样就实现了,无论设备的分辨率怎么变化,这个盒子始终都是正方形的宽度啦!!
源码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> ul{ width: 80%; margin: 30px auto;} ul li{ border: 1px solid #999; list-style: none; float: left; margin-right: 1%; position: relative; width: 16%; height: 100%;} ul li::before{ content: ""; padding-top: 100%; vertical-align: middle; display: block;} ul li span{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} </style> </head> <body> <!-- 当宽度为百分比的时候,如何让盒子始终保持正方形的状态 --> <ul> <li> <span>1</span> </li> <li> <span>2</span> </li> <li> <span>3</span> </li> <li> <span>4</span> </li> <li> <span>5</span> </li> </ul> </body> </html>
方法二:
和上边的方法类似,把盒子模型从默认的 content-box 定义为 border-box,再通过 padding 把盒子模型撑开即可。
源码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> ul{ width: 80%; margin: 30px auto;} ul li{ position:relative; background:red; border-right:1px solid #fff; list-style: none; float: left; width:20%; padding-top:20%; box-sizing: border-box; } ul li span{ position: absolute; top: 50%; left: 50%; webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} </style> </head> <body> <!-- 当宽度为百分比的时候,如何让盒子始终保持正方形的状态 --> <ul> <li> <span>1</span> </li> <li> <span>2</span> </li> <li> <span>3</span> </li> <li> <span>4</span> </li> <li> <span>5</span> </li> </ul> </body> </html>
「本文由 Savalone 原创或搜集整理发布,转载请遵守 CC BY-NC-ND 4.0 许可!」