<!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. centos7 安装jdk9 总结

    升级jdk, 从jdk8 升级到jdk9 1:卸载jdk8: 1〉 [root@localhost conf.d]# rpm -qa|grep java javapackages-tools-3.4. ...

  2. LeetCode 017 4Sum

    [题目] Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d  ...

  3. ES6 Fetch API HTTP请求实用指南

    本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解. 注意:所有示例均在带有箭头功能的 ES6中给出. 当前的Web /移动应用程 ...

  4. <算法笔记>关于快速排序的算法优化排序（顺便给百度百科纠个错）

    快速排序是排序算法之中的基本中的基本,虽然越来越多的接口函数将快速排序“完美的封装了起来”,比如C++中的qsort或者<algorithm>中的sort(与stable_sort相对应) ...

  5. 在EditText插入表情，并发送表情

    在EditText插入表情,点击发送按钮,将qq表情显示在TextView中: [mw_shl_code=java,true]public class EditTextActivity extends ...

  6. 淘宝双十一页面（Flexible）demo

    下面的代码是看了大漠 使用Flexible实现手淘H5页面的终端适配 做的一个demo. <!DOCTYPE html> <html lang="en" ng-a ...

  7. HDU 2035 人见人爱A^B（二分求幂，快速求幂）

    题意:求A的B次方的后三位数字 思路1:常规求幂,直接取余求解 代码: #include<iostream> #include<cstdio> using namespace ...

  8. java 基础 - 查找某个字串出现的次数及位置

    查找某个字串出现的次数及位置 public class search { public static void main(String[] args){ String str = "abc1 ...

  9. IOC/DI控制反转与依赖注入

    IOC/DI控制反转与依赖注入 IOC和DI表现的效果的是一样的只不过对于作用的对象不同,有了不一样的名字. 先用一个现实的例子来说明IOC/DI表现出来的效果.

  10. Maven-将jar包安装到本地仓库

    因为项目需要,使用的是sqlserver数据库,但是却找不到其对应的pom依赖,所以需要将本地jar包安装到本地仓库,定义pom依赖.以此为例,其他jar包均可参考该方式 cmd命令语句: mvn i ...