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. github入门书籍总结

    目录 第一章 由来 第二章 基本知识简介 第三章 初始操作 3.1 注册账号 3.2 创建仓库 第四章 具体实际操作 4.1 初始化仓库及相关操作 4.2 分支操作 4.3 消除冲突 4.4 压缩历史 ...

  2. Python基础之文件的基本操作

    概述:文件的基本操作1.open 打开文件 f = open("xxx",mode="r",encoding="utf-8") #常用形式 ...

  3. 『TensorFlow』迁移学习

    完全版见github:TransforLearning 零.迁移学习 将一个领域的已经成熟的知识应用到其他的场景中称为迁移学习.用神经网络的角度来表述,就是一层层网络中每个节点的权重从一个训练好的网络 ...

  4. Selenium-WebDriverApi接口详解

    浏览器操作 # 刷新 driver.refresh() # 前进 driver.forward() # 后退 driver.back() 获取标签元素 # 通过ID定位目标元素 driver.find ...

  5. 常用的jquery遍历函数

    1.Jquery遍历祖先 1).parent()  方法返回被选元素的直接父元素. 2).parents()  方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>) ...

  6. 2017-5-19&5-23/系统性能指标

    1. 系统性能指标包括哪些? 业务指标.资源指标.中间件指标.数据库指标.前端指标.稳定性指标.批量处理指标.可扩展性指标.可靠性指标. 1)业务指标:主要包括并发用户数.响应时间.处理能力. 指标 ...

  7. 将本地分支push到远程分支

    git push origin [localbranch]:[remotebranch]

  8. Utils--Cookie工具类

    Utils--Cookie工具类 package com.taotao.manage.util; import java.io.UnsupportedEncodingException; import ...

  9. paysoft 网关出现EntityRef:expecting;的错误。

    paysoft 网关出现EntityRef:expecting;的错误. 原因是传进去的url里有&字符,之前是自动转义的,现在要手工改成& http://www.runoob.com ...

  10. Flexbox 布局的最简单表单 (转)

    作者: 阮一峰 弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了. 三年前,我写过 Flexbox 的介绍(上,下),但是有些地方写得不清楚.今天,我看到一篇教程 ...