css设置div高度与宽度相等的一种方法
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高度与宽度相等的一种方法的更多相关文章
- 纯css设置元素高度与宽度相等
设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ ...
- CSS总结div中的内容垂直居中的五种方法
一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
- 纯CSS实现Div高度根据自适应宽度(百分百调整)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- [Android Pro] listView和GridView的item设置的高度和宽度不起作用
referece to : http://blog.csdn.net/beibeixiao/article/details/9032569 1. 在Android开发中会发现,有时listVi ...
- ## GridView 布局:item设置的高度和宽度不起作用、自动适配列数、添加Header和Footer ##
一.item设置的高度和宽度不起作用 转自:http://www.cnblogs.com/0616--ataozhijia/p/6031875.html [Android Pro] listView和 ...
- CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 实现三个div,固定左右两边的div宽为200,中间的div宽度自适应的四种方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- .Net Core实战教程(二):设置Kestrel的IP与端口的几种方法
.Net Core实战教程(二):设置Kestrel的IP与端口的几种方法 1.直接写在代码方式 Program.cs代码如下: using System; using System.Collecti ...
随机推荐
- 直播 APP 的直播实现流程
直播平台搭建所涉及的事项非常的广泛, 不仅需要直播源码. 直播系统开发. 后台服务 器.专门的运维人员等, 还需要技术团队切实的把控.下面, 小编就给大家确切的说下直播 平台搭建需要用到哪些步骤. 1 ...
- mybatis中的mapper接口文件以及selectByExample类的实例函数详解
记录分为两个部分,第一部分主要关注selectByExample类的实例函数的实现:第二部分讨论Mybatis框架下基本的实例函数. (一)selectByExample类的实例函数的实现 当你启动项 ...
- 『C++』STL容器入门
最近在学习opencv,因为C++基础很烂,所以遇到了不少问题,其中STL模块也是没少接触,特此简单了解一下STL的容器类型(主要是Vector)和迭代器的简单用法. C++ STL(标准模板库)是一 ...
- Android之Activity生命周期详解
Activity的生命周期方法: onCreate()--->onStart()--->onResume()--->onPause()--->onStop()--->on ...
- SAP 打开SAP物料帐期和财务账期
引http://blog.sina.com.cn/s/blog_494f9a6b0102e8zw.html 物料账期:Tcode MMPV和Tcode MMRV 财务账期:Tcode OKP1 和O ...
- ThinkPHP3的使用
1. 初始目录 7d 根目录 ├─Application 应用目录(空) ├─Public 资源文件目录 ├─ThinkPHP 框架目录 └─index.php 入口文件 2. 入口文件 // 应用入 ...
- Ubuntu 14.04(64位)+GTX970+CUDA8.0+Tensorflow配置 (双显卡NVIDIA+Intel集成显卡) ------本内容是长时间的积累,有时间再详细整理
(后面内容是本人初次玩GPU时,遇到很多坑的问题总结及尝试解决办法.由于买独立的GPU安装会涉及到设备的兼容问题,这里建议还是购买GPU一体机(比如https://item.jd.com/396477 ...
- 依赖注入 IOC
首先,明确下IoC是什么东西: 控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spring框架的核心. 控 ...
- PHP json_encode重要的秘密
php格式化json的函数 json_encode($value,$options) 其中有2个比较常用到的参数 JSON_UNESCAPED_UNICODE(中文不转为unicode ,对应的数字 ...
- 在js中if条件为null/undefined/0/NaN/""表达式时,统统被解释为false,此外均为true
Boolean 表达式 一个值为 true 或者 false 的表达式.如果需要,非 Boolean 表达式也可以被转换为 Boolean 值,但是要遵循下列规则: 所有的对象都被当作 true. 当 ...