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. RIP 相对寻址

    知识共享许可协议本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/rip-relative-addressing 本博客 ...

  2. Nagios 系统监控基本安装配置过程详解

    Nagios 是一款免费的开源 IT 基础设施监控系统,功能强大,灵活性强,能有效监控 Windows.Linux.VMware 和 Unix 主机状态,交换机.路由器等网络设置等.一旦主机或服务状态 ...

  3. 排查问题所用到的一些Linux命令实践(不定期更新。。)

    一.前言 线上问题排查可能是每个程序员都会经历的.在排查的过程中,往往会用到很多Linux命令,也会产生一些很实用的技巧.本博文通过分析一次线上问题排查的过程,把所有用到的命令串起来.每个Linux命 ...

  4. HDU 1006 [Tick Tick]时钟问题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1006 题目大意:钟表有时.分.秒3根指针.当任意两根指针间夹角大于等于n°时,就说他们是happy的, ...

  5. ArcGIS Pro 简明教程(2)基础操作和简单制图

    ArcGIS Pro 简明教程(2)基础操作和简单制图 By 李远祥 本章主要介绍ArcGIS Pro如何加载数据并进行简单的地图制作,以基本的操作为主. 上一章节介绍过,ArcGIS Pro是可以直 ...

  6. 为什么Java可以跨平台,而其他语言不行

    你好 我是大福 你现在看的是大福笔记 今天复习了Java语言的概述 内容包括Java 语言的历史.语言特点及平台版本 JRE和JDK的区别 这篇文章的主题是总结下对Java语言特点中的跨平台原理. 在 ...

  7. php基础知识掌握——四种界定符

    闲来无事,研究了与java.c#完全不同的领域php,php即(外文名:PHP: Hypertext Preprocessor,中文名:"超文本预处理器"),对于学习php的初学者 ...

  8. [java多线程] - Thread&Runnable运用

    负载是一个很大的话题,也是一个非常重要的话题.不管是在大的互联网软件中,还是在一般的小型软件,都对负载有一定的要求,负载过高会导致服务器压力过大:负载过低又比较浪费服务器资源,而且当高请求的时候还可能 ...

  9. 如何居中div?如何居中一个浮动元素?

    如何居中div? 给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 如何居中一个浮动元素? <!DOCTYPE ...

  10. JavaScript中国象棋程序(5) - Alpha-Beta搜索

    "JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第5节. 这一系列共有9个部分: 0.JavaScript中国象 ...