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. 77. Combinations (java 求C(n,k)的组合，排除重复元素)

    题目: Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. 解析:同求全 ...

  2. python记录_day019 类的约束 异常处理 日志

    一 .约束 python中约束有两种 第一种,通过抛异常进行约束,这种是子类不按我要求的来,我就给你抛异常(推荐) 操作:提取一个父类. 在父类中给出一个方法.但在方法中不给出任何代码,直接抛异常 # ...

  3. css 选择器三

    2.4.10 浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思.它有四个值. none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 ...

  4. hdu 3591 多重加完全DP

    题目: The trouble of Xiaoqian Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (J ...

  5. 【LeetCode】Permutation全排列

    1. Next Permutation 实现C++的std::next_permutation函数,重新排列范围内的元素,返回按照 字典序 排列的下一个值较大的组合.若其已经是最大排列,则返回最小排列 ...

  6. [洛谷 P3239] [HNOI2015]亚瑟王

    [HNOI2015]亚瑟王 题目描述 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑.他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂亮.众所周知, ...

  7. Miniconda安装scrapy教程

    一.背景说明 前两天想重新研究下Scrapy,当时的环境是PyCharm社区版+Python 3.7.使用pip安装一直报错 “distutils.errors.DistutilsPlatformEr ...

  8. Java 类名.class与类名.this 的区别?

    “类名.this”的语法在Java语言中叫做“qualified this”.相关规定在这里:Chapter 15. Expressions - Qualified this这个语法的主要用途是:在内 ...

  9. linux git：fatal: HTTP request failed

    问题 问题的出现比较奇怪 我一台电脑 git clone   没问题 另外一台电脑  git  clone  有问题 解决 yum update nss nss-util nspr 参考 https: ...

  10. vue 列表选中 v-for class

    地址: https://jsfiddle.net/50wL7mdz/96567/ 列表循环,默认选择 样式控制 <script src="https://unpkg.com/vue&q ...