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. --@angularJS--$http服务与后台数据交互

    1.httpBasic.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title& ...

  2. HTML 布局

    网站布局 大多数网站会把内容安排到多个列中(就像杂志或报纸那样). 大多数网站可以使用 <div> 或者 <table> 元素来创建多列.CSS 用于对元素进行定位,或者为页面 ...

  3. android Fragment和FragmentActivity

    MainActivity.java import android.app.AlertDialog; import android.app.Notification; import android.co ...

  4. Wireshark网络抓包(二)——过滤器

    一.捕获过滤器 选中捕获选项后,就会弹出下面这个框,在红色输入框中就可以编写过滤规则. 1)捕获单个IP地址 2)捕获IP地址范围 3)捕获广播或多播地址 4)捕获MAC地址 5)捕获所有端口号 6) ...

  5. 深圳尚学堂：Android APP的测试流程

    每一个新开发的软件都避免不了测试,我在这里总结了一些Android系统的移动端APP测试的一些测试流程,希望可以给大家一些帮助. 1. UI 测试App主要核ui与实际设计的效果图是否一致:交互方面的 ...

  6. 使用fullPage.js遇到的问题以及翻译

    使用fullPage.js做一简单页面,遇一古怪问题:.section中的h1标签始终被一插件生成的标签包裹,导致样式调整好不困难!花费数小时排查为何会生成这样一个标签,最终在fullPage.js的 ...

  7. oracle_权限

    Oracle 权限 权限允许用户访问属于其它用户的对象或执行程序,ORACLE系统提供三种权限:Object 对象级.System 系统级.Role 角色级.这些权限可以授予给用户.特殊用户publi ...

  8. JavaScript易混淆知识点小回顾--数组方法与字符串方法;

    数组属性: arr.length;查看数组的长度 arr.Pop;删除数组最后一个元素; 数组的方法: arr.push();添加到数组末端; arr.shift();删除数组的第一个元素; arr. ...

  9. matlab for循环应用（阶乘及the day of year）

    一.N的阶乘 %脚本文件:test.m %N的阶乘 使用举例 % 定义变量 % ii ---循环变量,也就是循环次数 % N ---N的阶乘 % N_factorial --计算N的阶乘 clc;cl ...

  10. spring和UEditor结合

    前言 春节无聊,就去弄一下富文本编辑器,然后百度了一番,很多说百度的UEditor不错,然后去官网照着文档弄一遍,是挺简单好用的.然后想把这玩意结合到自己的一个spring项目里面,果然还是在点上传图 ...