<!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. CF(439E - Devu and Birthday Celebration)莫比乌斯容斥

    题意:将n个糖果插入f-1个挡板分成f分(a1,a2,a3...af). 问有多少种分法能够使得gcd(a1,a2,a3...af)=1; 解法.莫比乌斯容斥,首先按1为单位分,这时候有C(n-1,f ...

  2. PAT 甲级 1007. Maximum Subsequence Sum (25) 【最大子串和】

    题目链接 https://www.patest.cn/contests/pat-a-practise/1007 思路 最大子列和 就是 一直往后加 如果 sum < 0 就重置为 0 然后每次 ...

  3. openstack多region介绍与实践

    版权声明:本文为原创文章,转载请注明出处. 概念介绍 所谓openstack多region,就是多套openstack共享一个keystone和horizon.每个区域一套openstack环境,可以 ...

  4. i=i+2 与i+=2

    i=i+2 比 i+=2多了一次对变量 i 的运算.后者效率高

  5. smokeping再次部署遇到的问题记录

    问题1: Can't locate Sys/Syslog.pm in @INC (@INC contains: /opt/smokeping_workspace/thirdparty/lib/perl ...

  6. html5--1.15 style元素与HTML样式基础

    html5--1.15 style元素与HTML样式基础 学习要点: 1.引入样式的三种方式2.了解style元素插入内联样式表与内部样式表 1.引入样式的三种方式 1.外部样式表:通过 link元素 ...

  7. sqlite：多线程操作数据库“database is locked”解决方法

    1. 使sqlite支持多线程(不确定是否非加不可,暂且加上,以备后患) 可以在编译时/启动时/运行时选择线程模式,参考:http://www.cnblogs.com/liaj/p/4015219.h ...

  8. linux 加密解密文件小程序

    代码见下面,编译之后就可以用:建议放在bash下,或者添加环境变量. 使用方法:encrypt .两次输入密码.加密密码与解密密码不一致解码后就不是原文件了! #include <stdio.h ...

  9. ACM学习历程—Codeforces 446C DZY Loves Fibonacci Numbers(线段树 && 数论)

    Description In mathematical terms, the sequence Fn of Fibonacci numbers is defined by the recurrence ...

  10. CodeForces - 204C Little Elephant and Furik and Rubik

    CodeForces - 204C Little Elephant and Furik and Rubik 个人感觉是很好的一道题 这道题乍一看我们无从下手,那我们就先想想怎么打暴力 暴力还不简单?枚 ...