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. swift 画图 Charts的基本使用

    下面的这些代码呢是在oc工程里里使用的 其实和在swift中使用没什么大的差别 属性都一样的 //创建饼状图    self.pieChartView = [[PieChartView alloc] ...

  2. C#综合揭秘——细说进程、应用程序域与上下文之间的关系

    引言 本文主要是介绍进程(Process).应用程序域(AppDomain)..NET上下文(Context)的概念与操作.虽然在一般的开发当中这三者并不常用,但熟悉三者的关系,深入了解其作用,对提高 ...

  3. Servlet RequestDispatcher需要注意的情况

    Servlet RequestDispatcher需要注意的情况: 如果使用getServletContext().getRequestDispatcher("/a.do")得到R ...

  4. C++中的trivial解释

    Trivial default constructor The default constructor for class T is trivial (i.e. performs no action) ...

  5. Js让光标停在输入框input框最后面

    var val = $(this) val();   1.$(this). focus(); 2.$(this).val(""); 3.$(this).val(val);   1. ...

  6. DEVTMPFS

    devtmpfs选项保证了系统启动使用临时文件系统.不选会启动出现readonly ,无法启动

  7. [CSS3]学习笔记-文字与字体相关样式

    1.给文字添加阴影 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  8. 如何一步一步用DDD设计一个电商网站（十三）—— 领域事件扩展

    阅读目录 前言 回顾 本地的一致性 领域事件发布出现异常 订阅者处理出现异常 结语 一.前言 上篇中我们初步运用了领域事件,其中还有一些问题我们没有解决,所以实现是不健壮的,下面先来回顾一下. 二.回 ...

  9. 小机器人自动回复（python，可扩展开发微信公众号的小机器人）

    api来之图灵机器人.我们都知道微信公众号可以有自动回复,我们先用python脚本编写一个简单的自动回复的脚本,利用图灵机器人的api. http://www.tuling123.com/help/h ...

  10. Java Web(二) Servlet中response、request乱码问题解决

    三月不减肥,五月徒伤悲,这就是我现在的状态,哈哈~ 健身.博客坚持. --WH 一.request请求参数出现的乱码问题 get请求: get请求的参数是在url后面提交过来的,也就是在请求行中, M ...