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. DELPHI加密字串（异或运算加密）

    首先有两个自定的转换函数: function myStrToHex(s:string):string; //字串转16进制 var TmpStr:string; i:integer; begin Tm ...

  2. DELPHI删除记录文件

    http://blog.itpub.net/729024/viewspace-564890/ DBGrid1.SelectedRows.Delete;

  3. RadioGroup

    获取选中的Text radioGroup1.Properties.Items[radioGroup1.SelectedIndex].Description

  4. Windows Server 2008 R2防火墙出站规则

    出战规则指Windows Server 2008 R2系统访问外部的某台计算机通信数据流. 配置防火墙阻止Windows Server 2008 R2系统通过IE软件访问外部的网站服务器,阻止Wind ...

  5. easyUI droppable组件使用

    easyUI droppable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. WinMerge文件编码设置

    http://blog.sina.com.cn/s/blog_7575fab10101o0na.html 系统默认是System codepage,我们要选用Custom codepage.值得注意的 ...

  7. Spring IO Platform简介及示例

    什么是Spring IO Platform Spring IO Platform,简单的可以认为是一个依赖维护平台,该平台将相关依赖汇聚到一起,针对每个依赖,都提供了一个版本号: 这些版本对应的依赖都 ...

  8. Xcode自带iOS测试方法

    在说Xcode自带测试方法前先讲下程序在内存中的空间划分, 一般可分为5个部分: #1. BSS段, 存放未初始化的全局变量. BSS是英文Block Started by Symbol的简称.BSS ...

  9. ContextMenu控件引用以及不用v4包的方法

    最近想撸个APP出来玩玩,本想用Yalantis出的SideMenu,结果因为依赖问题放弃了,改用他们家的ContextMenu. 如果你用了v4包 那么问题就比较简单了,直接打开项目中app中的bu ...

  10. C#读取XML方式

    前言 前一篇我们简单给大家做了XML的介绍,现在咱们继续这个系列 XML文件是一种常用的文件格式,例如WinForm里面的app.config以及Web程序中的web.config文件,还有许多重要的 ...