div.category{

width:33%;

padding:33% 0 0;

}

1、关键在padding:33% 0 0这句代码，通过设置padding-top与宽度相等（padding使用百分比时，padding-top和padding-bottom使用的也是宽度的百分比，而不是高度的！！！），使div变成正方形。

2、这样设置后，还有问题，div里的内容都被挤到底部了。另外考虑div里文字本身的高度，修改为：

div.category{

width:33%;

padding:14% 0 14% 0;

}

结果：

css设置div高度与宽度相等的一种方法的更多相关文章

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

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

  2. CSS总结div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  3. 纯CSS实现Div高度根据自适应宽度（百分百调整）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

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

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

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

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

  7. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  8. 实现三个div，固定左右两边的div宽为200，中间的div宽度自适应的四种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. .Net Core实战教程（二）：设置Kestrel的IP与端口的几种方法

    .Net Core实战教程(二):设置Kestrel的IP与端口的几种方法 1.直接写在代码方式 Program.cs代码如下: using System; using System.Collecti ...

随机推荐

  1. SSM框架中各层作用

    SSM是sping+springMVC+mybatis集成的框架. MVC即model view controller. model层=entity层.存放我们的实体类,与数据库中的属性值基本保持一致 ...

  2. 『C++』STL容器入门

    最近在学习opencv,因为C++基础很烂,所以遇到了不少问题,其中STL模块也是没少接触,特此简单了解一下STL的容器类型(主要是Vector)和迭代器的简单用法. C++ STL(标准模板库)是一 ...

  3. shiro中记住我功能

    Shiro提供了记住我(RememberMe)的功能,比如访问如淘宝等一些网站时,关闭了浏览器下次再打开时还是能记住你是谁,下次访问时无需再登录即可访问,基本流程如下: 1.首先在登录页面选中Reme ...

  4. csu oj 1342: Double

    Description 有一个由M个整数组成的序列,每次从中随机取一个数(序列中每个数被选到的概率是相等的)累加,一共取N次,最后结果能被3整除的概率是多少? Input 输入包含多组数据.     ...

  5. 牛客练习赛32 A/B/C

    https://ac.nowcoder.com/acm/contest/272/A v<=k时  答案就是k个1 否则贪心的从中间向两边添加1 #include<bits/stdc++.h ...

  6. Python的time和datetime

    #python中时间日期格式化符号 %y 两位数的年份表示(00-99) %Y 四位数的年份表示(000-9999) %m 月份(01-12) %d 月内中的一天(0-31) %H 24小时制小时数( ...

  7. Python函数基础-函数调用，定义，参数，递归

    Python内置了很多函数供调用,eg 求绝对值函数abs() >>>abs(-1) 1 >>>abs(1) 求和函数sum(),sum(iterable,star ...

  8. MSSQL内存架构及管理

    1.  MSSQL内存架构 相比较Oracle,MSSQL的内存区域并没那么清晰,但和Oracle类似,MSSQL内存区域大体也可以分为三个部分:buffer pool,query/workspace ...

  9. java 实现简单循环队列

    package www.queue; import java.util.Arrays; /** * 循环队列: * 循环队列的出现是为了解决顺序队列出队列后,首指针向后移动后前面的存储过程浪费不能使用 ...

  10. 深入理解java虚拟机---Class文件(二十)

    无符号数.表 当实现了不同语言的编译器,比如jython,jruby等等,那么就可以利用这些语言编写代码,通过各自的编译器编译成符合jvm规范的字节码文件,就可以利用jvm来执行了. Class文件在 ...