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;

}

结果:

原文地址:https://www.cnblogs.com/oliverreal/p/9278969.html

时间: 2024-10-18 05:45:30

css设置div高度与宽度相等的一种方法的相关文章

CSS总结div中的内容垂直居中的五种方法

文章目录 一.行高(line-height)法 二.内边距(padding)法 三.模拟表格法 四.CSS3的transform来实现 五:css3的box方法实现水平垂直居中 六:flex布局(2018/04/17补充) 一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这

CSS设置div的最小高度和最小宽度

CSS设置div的最小高度和最小宽度:所谓设置div的最小高度和宽度就是设置一个值,如果实际宽度或者高度小于此值时,就会将实际的宽度和高度值设置为规定的此最小值,下面就通过实例代码简单做一下介绍.如果在标准浏览器中,当然可以使用max-height或者max-width实现此效果,例如: max-width:50px; max-height:100px; 以上代码在标准浏览器中是没有任何问题的,但是无奈IE6浏览器并不支持,因为当前还有为数不少的IE6用户,所以需要兼容IE浏览器.代码修改如下:

CSS设置div的最小高度和最小宽

CSS设置div的最小高度和最小宽度: 所谓设置div的最小高度和宽度就是设置一个值,如果实际宽度或者高度小于此值时,就会将实际的宽度和高度值设置为规定的此最小值,下面就通过实例代码简单做一下介绍. 如果在标准浏览器中,当然可以使用max-height或者max-width实现此效果,例如: max-width:50px; max-height:100px; 以上代码在标准浏览器中是没有任何问题的,但是无奈IE6浏览器并不支持,因为当前还有为数不少的IE6用户,所以需要兼容IE浏览器.代码修改如

CSS中的高度和宽度

1.简单的说,常规流向的块级元素,width为auto时,会尽量充满父元素的内容宽度,而height为auto时,则是由其内部的不浮动的子元素的高度决定(无浮动,绝对定位). 2.width:100%;width:auto <div>    <p>1</p></div><style type="text/css">div{ width:600px; overflow:auto;}p{ width:100%;      padd

实现三个div,固定左右两边的div宽为200,中间的div宽度自适应的四种方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实现三个div,固定左右两边的div宽为200,中间的div宽度自适应的四种方法</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding:

未知宽度水平居中的几种方法

在某些特定的场合,在没有知道宽度的情况下却要求水平居中,前段时间在写分页的时候碰到了这个问题.当时在网上找了一些解决方法,并选了一个最合适的方法,现将当时整理的一些方法发出.下列以分页作为演示说明: 点击查看演示DEMO 方案一 利用浮动的包裹性和相对定位百分比数据值特性,传说称之为"相对浮动" .unknow_width_center1 {position:relative; left:50%; float:left;} .unknow_width_center1 li {posit

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

.Net Core实战教程(二):设置Kestrel的IP与端口的几种方法

.Net Core实战教程(二):设置Kestrel的IP与端口的几种方法 1.直接写在代码方式 Program.cs代码如下: using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore; using Microsoft.AspNetCore.Hosting; using M

通过调色板来设置div的颜色宽度高度

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0px; margin: 0px; } #div-color{ background-color: #ffff00; width: 100px; height: 100px; } .mid