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. 『计算机视觉』经典RCNN_其一：从RCNN到Faster-RCNN

    RCNN介绍 目标检测-RCNN系列 一文读懂Faster RCNN 一.目标检测 1.两个任务 目标检测可以拆分成两个任务:识别和定位 图像识别(classification)输入:图片输出:物体的 ...

  2. python-爬虫-Beautifulsoup模块

    一 介绍 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你 ...

  3. python-day73--django课上项目01

    from django.db import models # Create your models here. class Book(models.Model): name=models.CharFi ...

  4. 【Linux】bash shell学习

    Bash Shell Linux系统的合法shell都写入/etc/shells这个文件,默认使用的shell版本称为“Bourne Again Shell(简称bash)” 用户登录时系统会分配一个 ...

  5. [每周一文]week 1

    花开人间四月天 摘自美文网:https://www.lookmw.cn/xinqing/49623.html 赏春   四月芳菲淡淡香,寻花问柳向斜阳.   陌上行人思作客,人间遍地是春情.   文/ ...

  6. [LightOJ 1027] A Dangerous Maze

    A Dangerous Maze You are in a maze; seeing n doors in front of you in beginning. You can choose any ...

  7. Android应用启动时Activity被创建两次

    项目需要使用到播放器,用开源的ijkplayer播放器改装. 但是在调试过程中Activity的OnCreate()被调用两次,调试时直接连接手机调试,有时候又不一定是两次. 后来偶尔看到一句话 “当 ...

  8. [IOS微信] PList文件解析，boost数据读取

    最近在解析IOS版微信数据中的 mmsetting.archive 文件时,第一次接触到PList文件. 注:mmsetting.archive  不是一个标准的PList文件,其中含有汉字,并且很多 ...

  9. html盒子水平和垂直居中

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

  10. Spring注入,Ioc的具体配置

    Spring框架的IOC注入: 一.Java部分代码: Person实体类: package com.ioc; import java.util.List; import java.util.Map; ...