zoukankan      html  css  js  c++  java
  • 宽度设置百分比 高度跟宽度一样css解决方案

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="UTF-8">
     5   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     6   <title>Document</title>
     7   <style type="text/css">
     8     *{margin: 0;padding: 0;}
     9     div{width: 33.3%;float: left;background: red;font-size: 0;border-radius: 100%;position: relative}
    10     div::before{content: "";padding-top: 100%;display: block;}
    11     div span{color: #FFf;font-size: 14px;width: 100%;display: inline-block;text-align: center;top: 50%;position: absolute;height: 30px;line-height: 30px;margin-top: -15px;}
    12   </style>
    13 </head>
    14 <body>
    15   <div><span>哈哈</span></div>
    16   <div><span>哈哈</span></div>
    17   <div><span>哈哈</span></div>
    18 </body>
    19 </html>

    转载于:http://www.cnblogs.com/sure2016/p/6340332.html

  • 相关阅读:
    1104.整除问题
    1101.表达式求值(难)
    1102.最小子面积矩阵
    1095.2的幂次方
    1094.String matching
    1093.WERTYU
    1096.日期差值
    1092.Fibonacci
    车站解题程序
    阶乘之和解题程序
  • 原文地址:https://www.cnblogs.com/zhangzhijian/p/6400816.html
Copyright © 2011-2022 走看看