div.wh{

	background:#ff0;width:50%;position:relative;display:inline-block;

}

div.wh:before{

	content: "";

	display: inline-block;

	padding-bottom: 100%;

	width: .1px;

	vertical-align: middle;

}

div.wh{

	background:#ff0;

	display:inline-block;

	width:50%;

	padding-bottom: 50%;

}

　　

　　

div 宽高相等2种实现方式的更多相关文章

  1. vue 动态获取div宽高有时候为0的情况

    项目背景: 需要使用echarts进行图表展示.由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中. 需要使用 this.$nextTick(() => {    }) ...

  2. Activity启动过程中获取组件宽高的五种方式

    第一种:(重写Activity的onWindowFocusChanged方法) /** * 重写Acitivty的onWindowFocusChanged方法 */ @Override public ...

  3. img标签在div中水平垂直居中--两种实现方式

    第一种方式: text-align:center; vertical-align:middle; div{ text-align: center; vertical-align:middle;widt ...

  4. div宽高不确定，内容居中

    当div的宽高不确定时候,内容居中:// 加在父级div中 垂直居中:align-items:center; display: -webkit-flex;水平居中:justify-content:ce ...

  5. android获取view宽高的几种方法

    在onCreate方法中我们通过mView.getWidth()和mView.getHeight()获取到的view的宽高都是0,那么下面几种方法就可以在onCreate方法中获取到view的宽高. ...

  6. div宽高设置为百分比

    如果你将div的width和height设置为百分比,但是发现页面都不见了,这是因为父标签也要设置为百分比,也就是说body和html的宽高也需要设置为百分比 #containter{ width:1 ...

  7. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

  8. 两栏自适应布局，右侧div宽高不定

    .main,.sitebar{       height: 300px;       font: bolder 20px/300px "微软雅黑";       color: bl ...

  9. 前端web设置div宽高一样

    <div class="constant-width-to-height-ratio"></div> .constant-width-to-height-r ...

随机推荐

  1. Angular - - ngRoute Angular自带的路由

    ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信 ...

  2. js原生之一个面向对象的应用

    function IElectricalEquipment() { }        IElectricalEquipment.prototype = {            poweron: fu ...

  3. --@ui-router——$state服务原版详解

    $state service in module ui.router.state Description $state service is responsible for representing ...

  4. Struts2的拦截器----Dog实例

    拦截器是一个类,这个类包含方法,用来解决DRY规则,即代码复用的问题.如果不调用拦截器,代码中需要显示通过代码调用目标方法,定义了拦截器,系统就会自动执行.大部分时候,拦截器方法都是通过代理的方式调用 ...

  5. 使用IDA静态分析解密《舰娘Collection》的lua脚本

    好久没写东西了,换工作之后忙得一比.你说创业?风太大没听清啊看了看以前写的东西,觉得以前写得太严肃了,从现在开始要轻松一点,要做一名逗逼码农. 本文不会介绍破解的细节,最终完成破解所编写的代码也不会公 ...

  6. 一个好的函数（gcd）求最小公约数

    这个函数是我无意中看到的很不错,很给力,我喜欢 是用于求最小公约数的 简单的描述就是,记gcd(a,b)表示非负整数a,b的最大公因数,那么:gcd(a,b)=gcd(b,a%b)或者gcd(a,0) ...

  7. SQL server存储过程：数据的插入和更新

    存储过程的功能非常强大,在某种程度上甚至可以替代业务逻辑层, 接下来就一个小例子来说明,用存储过程插入或更新语句. 1.数据库表结构 所用数据库为Sql Server2008. 2.创建存储过程 (1 ...

  8. android的引用库类

    在eclipse中的项目里,有时需要外来的jar文件.添加后就可以消去程序中的红条条啦~~~~~~~~~可以照下面的说明添加. 方法/步骤   打开eclipse,导入项目   右击 项目 , “Bu ...

  9. Spring context:component-scan中使用context:include-filter和context:exclude-filter

    Spring context:component-scan中使用context:include-filter和context:exclude-filter XML: <?xml version= ...

  10. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第六章：管理产品图片——多对多关系（上篇）

    在这章中,我们将学习如何创建一个管理图片的新实体,如何使用HTML表单上传图片文件,并使用多对多关系将它们和产品关联起来,如何将图片存储在文件系统中.在这章中,我们还会学习更加复杂的异常处理,如何向模 ...