<!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. API的理解和使用——列表类型的命令

    列表类型的命令及对应的时间复杂度 操作 命令 功能 时间复杂度 添加 rpush key value [value ...] 向右插入 O(k),k是元素个数 lpush key value [val ...

  2. windows下创建做一个类似与linux 的SFTP

    在项目中经常需要做通过ftp上传文件到ftp上,如果服务器是windows版的服务器又该如何做呢,下面就给大家介绍一个软件:freeSSHd 软件地址    http://www.freesshd.c ...

  3. java多线程系列笔记 目录

    基础篇 Java多线程系列 基础篇01 线程的状态 Java多线程系列 基础篇02 线程的创建和运行 Java多线程系列 基础篇03 线程的优先级和守护线程 Java多线程系列 基础篇04 线程中断 ...

  4. Android Weekly Notes Issue #276

    September 24th, 2017 Android Weekly Issue #276 本期内容包括LifeCycle与Architecture的相关文章,以及新的JSON解析库Moshi的介绍 ...

  5. VLAN(虚拟局域网)划分

    VLAN根据不同的需求,可以有多种划分方式: 一:静态划分 基于端口             按VLAN交换机上的物理端口和内部的PVC(永久虚电路)端口来划分 静态划分安全.可靠,易于配置与维护 二 ...

  6. python返回列表中指定内容的索引

    import numpy as npa=[2,10,2,3,4,10,10]ans = np.where(np.array(a)==10)print(ans) 结果是:(array([1, 5, 6] ...

  7. RQNOJ 514 字串距离：dp & 字符串

    题目链接:https://www.rqnoj.cn/problem/514 题意: 设有字符串X,我们称在X的头尾及中间插入任意多个空格后构成的新字符串为X的扩展串,如字符串X为”abcbcd”,则字 ...

  8. 五年java工作应具备的技能

    具有一到五年开发经验 需要学习内容很多 JVM/分布式/高并发/性能优化/Spring MVC/Spring Boot/Spring Cloud/MyBatis/Netty源码分析等等等 01.透彻理 ...

  9. IDEAL葵花宝典：java代码开发规范插件 （maven helper）解决maven 包冲突的问题

    小编说到: 在我们日常开发当中常常我们会遇到JAR包冲突.找来找去还找不到很是烦人.那么所谓的JAR包冲突是指的什么那?JAR包冲突就是-引入的同一个JAR包却有好几个版本. 例如: 项目中引用了两个 ...

  10. listen and translation exercise 53

    It was hard work and there weren't any interesting things for him. You should be an expert with comp ...