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. 『PyTorch』第二弹_张量

    参考:http://www.jianshu.com/p/5ae644748f21# 几个数学概念: 标量(Scalar)是只有大小,没有方向的量,如1,2,3等 向量(Vector)是有大小和方向的量 ...

  2. 压力测试之ab命令

    网站性能压力测试是服务器网站性能调优过程中必不可缺少的一环.只有让服务器处在高压情况下,才能真正体现出软件.硬件等各种设置不当所暴露出的问题. ab是apache自带的压力测试工具.ab非常实用,它不 ...

  3. Buffer和Stream

    Buffer JavaScript 语言自身只有字符串数据类型,没有二进制数据类型.但在处理像TCP流或文件流时,必须使用到二进制数据. 因此在 Node.js中,定义了一个 Buffer 类,该类用 ...

  4. 验证ip地址正则

    验证ip地址: ^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])(\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)){3}$ 析:(1\d{ ...

  5. xinetd黑/白名单配置教程（以telnet为例）

    对于诸如telnet等托管于xinetd的服务,当请求到来时由于是通过xinetd进行通知,所以可以直接在xinetd上配置白名单允许和拒绝哪些ip连接服务. 本文主要参考xinetd.conf的ma ...

  6. 【转】Netty之解决TCP粘包拆包(自定义协议)

    1.什么是粘包/拆包 一般所谓的TCP粘包是在一次接收数据不能完全地体现一个完整的消息数据.TCP通讯为何存在粘包呢?主要原因是TCP是以流的方式来处理数据,再加上网络上MTU的往往小于在应用处理的消 ...

  7. nop 4.1 Widget 探究- 视图组件

    1. 系统默认自带了一个NivoSlider 的Wdget. 在Nop.Web项目首页的HomePageTop里 这个写法是 ASP.NET Core MVC 中的新特性 视图组件,与局部视图相似,但 ...

  8. install sz rz linux

    1◆ ready 2◆ controller component   Xshell 注册码:690313-111999-999313 Xftp 注册码:101210-450789-147200   3 ...

  9. SQLite 剖析

    由于sqlite对多进程操作支持效果不太理想,在项目中,为了避免频繁读写 文件数据库带来的性能损耗,我们可以采用操作sqlite内存数据库,并将内存数据库定时同步到文件数据库中的方法. 实现思路如下: ...

  10. GitHub下的文件放到Linux系统下

    1.在GitHub账号下clone URL 项目. 2.到Linux服务器下执行以下操作: (1)  mkdir test (2)  cd test/ (3)  git clone  复制的项目URL