<!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

   <title>Document</title>

   <style type="text/css">

     *{margin: 0;padding: 0;}

     div{width: 33.3%;float: left;background: red;font-size: 0;border-radius: 100%;position: relative}

     div::before{content: "";padding-top: 100%;display: block;}

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

   </style>

 </head>

 <body>

   <div><span>哈哈</span></div>

   <div><span>哈哈</span></div>

   <div><span>哈哈</span></div>

 </body>

 </html>

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

宽度设置百分比 高度跟宽度一样css解决方案的更多相关文章

  1. CSS图片宽度设置百分比 , 高度同宽度相同

    在图片长宽不相等的情况下,想将长宽设置为相等并且自适应屏幕,可以通过 js 的方式进行设置并通过监听 resize 来实时更新,但是这种方式很麻烦. 这里通过 css 来达到我们想要的效果: < ...

  2. 纯css设置元素高度与宽度相等

    设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ ...

  3. [Android Pro] listView和GridView的item设置的高度和宽度不起作用

    referece to : http://blog.csdn.net/beibeixiao/article/details/9032569 1.     在Android开发中会发现,有时listVi ...

  4. ## GridView 布局：item设置的高度和宽度不起作用、自动适配列数、添加Header和Footer ##

    一.item设置的高度和宽度不起作用 转自:http://www.cnblogs.com/0616--ataozhijia/p/6031875.html [Android Pro] listView和 ...

  5. HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客

    原文:HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HobHunter ...

  6. css设置div高度与宽度相等的一种方法

    div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百 ...

  7. get新技能： 如何设置元素高度与宽度成特定比例。宽度改变，高度自动按比例改变。 例如设置宽高比16:9。

    设置宽高比在很多时候是有用的. 下面的栗子,我们设置一个容器的宽高比为16:9 //HTML代码片段 <div class="container"> <div c ...

  8. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  9. Element el-table-column组件列宽度设置百分比无效

    问题 使用Element table组件时,给列设置百分比宽度无效(width="30%") 解决 用属性min-width="3"代替属性width=&quo ...

随机推荐

  1. WordPress升级出现Briefly unavailable for scheduled maintenance. Check back in a minute.

    WordPress升级出现Briefly unavailable for scheduled maintenance. Check back in a minute.   打开博客时提示: Brief ...

  2. 线程池ThreadPoolExcecutor介绍

    线程池ThreadPoolExecutor 使用Executors和ThreadPoolExecutor 并发新特性—Executor 框架与线程池

  3. HttpWebRequest的timeout和ReadWriteTimeout（转载）

    公司[1]一牛人看我的代码,说我设置的timeout有误,还应该设置ReadWriteTimeout.本人很不服,于是上网查看了相关说明. HttpWebRequest httpWebRequest ...

  4. C++ 构造函数+析构函数

    3-2 构造函数的调用 Time Limit: 1000MS Memory limit: 65536K 题目描述 通过本题目的练习可以掌握构造函数和析构函数的调用: 创建类A:类中仅包含构造函数和析构 ...

  5. 算法（Algorithms）第4版 练习 1.3.10

    主要思路:和1.3.9相似,只不过运算表达式的生成方式不一样 用Dijkstra的双栈算法. 遇到数字则压入数字栈中(String). 遇到运算符则压入运算符栈中(String). 遇到右括号时,从数 ...

  6. 时间序列数据库概览——基于文件（RRD）、K/V数据库（influxDB）、关系型数据库

    一般人们谈论时间序列数据库的时候指代的就是这一类存储.按照底层技术不同可以划分为三类. 直接基于文件的简单存储:RRD Tool,Graphite Whisper.这类工具附属于监控告警工具,底层没有 ...

  7. Linux_服务器_02_在linux上怎么看eclipse控制台输出语句

    在windows下,tomcat启动之后有一个黑窗口,很容易看到System.out.println或ex.printStackTrace这样的函数输出,非常方便调试,但是在linux下,没有这样的窗 ...

  8. oracle中导出sql的几个常见词语的意思

    set feedback off不显示反馈信息  “1行已插入”,大量数据装入时,显示这个也是很浪费资源和时间的. set define off 如果你某个字段里面有&字符,插入数据会出错,设 ...

  9. ajax异步上传文件FormDate方式，html支持才可使用

    今天需要做一个头像的预览功能,所以我想到了异步上传文件. 总结几点: 异步上传难点: 文件二进制流如何获取 是否需要设置表单的头,就是content-Type那里.异步,所以无所谓了吧. 其他就差不多 ...

  10. ubuntu c++ 关机 重启 挂起 API

    #include <unistd.h> #include <linux/reboot.h> int main() { reboot(LINUX_REBOOT_MAGIC1, L ...