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. 直播 APP 的直播实现流程

    直播平台搭建所涉及的事项非常的广泛, 不仅需要直播源码. 直播系统开发. 后台服务 器.专门的运维人员等, 还需要技术团队切实的把控.下面, 小编就给大家确切的说下直播 平台搭建需要用到哪些步骤. 1 ...

  2. mybatis中的mapper接口文件以及selectByExample类的实例函数详解

    记录分为两个部分,第一部分主要关注selectByExample类的实例函数的实现:第二部分讨论Mybatis框架下基本的实例函数. (一)selectByExample类的实例函数的实现 当你启动项 ...

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

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

  4. Android之Activity生命周期详解

    Activity的生命周期方法: onCreate()--->onStart()--->onResume()--->onPause()--->onStop()--->on ...

  5. SAP 打开SAP物料帐期和财务账期

    引http://blog.sina.com.cn/s/blog_494f9a6b0102e8zw.html 物料账期:Tcode MMPV和Tcode MMRV 财务账期:Tcode OKP1  和O ...

  6. ThinkPHP3的使用

    1. 初始目录 7d 根目录 ├─Application 应用目录(空) ├─Public 资源文件目录 ├─ThinkPHP 框架目录 └─index.php 入口文件 2. 入口文件 // 应用入 ...

  7. Ubuntu 14.04(64位)+GTX970+CUDA8.0+Tensorflow配置 (双显卡NVIDIA+Intel集成显卡) ------本内容是长时间的积累,有时间再详细整理

    (后面内容是本人初次玩GPU时,遇到很多坑的问题总结及尝试解决办法.由于买独立的GPU安装会涉及到设备的兼容问题,这里建议还是购买GPU一体机(比如https://item.jd.com/396477 ...

  8. 依赖注入 IOC

    首先,明确下IoC是什么东西: 控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spring框架的核心. 控 ...

  9. PHP json_encode重要的秘密

    php格式化json的函数 json_encode($value,$options) 其中有2个比较常用到的参数 JSON_UNESCAPED_UNICODE(中文不转为unicode ,对应的数字 ...

  10. 在js中if条件为null/undefined/0/NaN/""表达式时,统统被解释为false,此外均为true

    Boolean 表达式 一个值为 true 或者 false 的表达式.如果需要,非 Boolean 表达式也可以被转换为 Boolean 值,但是要遵循下列规则: 所有的对象都被当作 true. 当 ...