<!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. yhdsir@function:php

    curl 获取页面信息 function curl_get_content($url){ $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $u ...

  2. PHP echo() 函数

    实例 输出文本: <?php echo "Hello world!"; ?> 定义和用法 echo() 函数输出一个或多个字符串. 注释:echo() 函数实际不是一个 ...

  3. debian支持的系统架构介绍

    debian系统支持类型有armel.armhf.i386.amd64.mips.mipsel, powerpc.sparc.s390.s390x等. 详细对比文章见https://www.debia ...

  4. latex 技巧汇总

    最近打算详细的学习一下latex,所以在学习的过程中遇到了一些问题.随时出问题,随时记录更新. 我是萌萌的Latex, x_0. 再写具体的技巧之前,先说一个关于打公式的小技巧.有时候你不知道怎么设置 ...

  5. matlab之find()函数

    Find 这个函数用处也挺大的,这几天看很多程序都见到这一函数,今天要好好给阐述,了解下这个函数是为了找到矩阵或者是数组,向量中的非零元素.下面一大段英文没耐心看.看看例子就行了. 第一个用法是 nd ...

  6. BZOJ 1724 [Usaco2006 Nov]Fence Repair 切割木板：贪心 优先队列【合并果子】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1724 题意: 你要将一块长木板切成n段,长度分别为a[i](长木板的长度 = ∑ a[i] ...

  7. jQuery 中的常用函数

    on() : 方法在被选元素及子元素上添加一个或多个事件处理程序.自1.7 版本起,on()方法是 bind(),live() 和 delegate()方法的替代品 语法: $(selector).o ...

  8. 勤于思考： ASP.NET MVC 注销后 使用浏览器 【后退】 不使用缓存页面

    经过自己和朋友一起探讨,总结出三种方法实现. 方法一: <script type="text/javascript"> $(function () { window.h ...

  9. hadoop源码剖析--hdfs安全模式

    一.什么是安全模式 hadoop安全模式是name node的一种状态,处于该状态时有种量特性: 1.namenode不接受任何对hfds文件系统的改变操作(即此时整个文件系统处于只读状态): 2.不 ...

  10. CodeForces - 1000D：Yet Another Problem On a Subsequence （DP+组合数）

    The sequence of integers a1,a2,…,aka1,a2,…,ak is called a good array if a1=k−1a1=k−1 and a1>0a1&g ...