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. 使用ProgressDialog创建进度对话框

    ProgressDialog代表了进度对话框,程序只要创建ProgressDialog实例,并将它显示出来就是一个进度对画框.使用ProgressDialog创建进度对话框有如下两种方式. ①如果只是 ...

  2. Java打印

    Java打印 import java.awt.Color; import java.awt.Font; import java.awt.FontMetrics; import java.awt.Gra ...

  3. Sql Server 查询多行并一行

    干货 CREATE TABLE #benefit_code21 (id INT, number nvarchar(MAX), pname ), collegeID INT, applicationda ...

  4. oracle数据库包package小例子

    为了把某一个模块的函数.存储过程等方便查询维护,可以把它们打到一个包里.下面给出一个简单的小例子. 1.创建包头 create or replace package chen_pack is func ...

  5. AKKA学习笔记

    AKKA学习笔记总结 01. AKKA 1. 介绍: Akka基于Actor模型,提供了一个用于构建可扩展的(Scalable).弹性的(Resilient).快速响应的(Responsive)应用程 ...

  6. Linux驱动技术(一) _内存申请

    先上基础,下图是Linux的内存映射模型,其中体现了Linux内存映射的几个特点: 每一个进程都有自己的进程空间,进程空间的0-3G是用户空间,3G-4G是内核空间 每个进程的用户空间不在同一个物理内 ...

  7. 【译】JavaScript Promise API

    原文地址:JavaScript Promise API 在 JavaScript 中,同步的代码更容易书写和 debug,但是有时候出于性能考虑,我们会写一些异步的代码(代替同步代码).思考这样一个场 ...

  8. SpringBoot实践 - SpringBoot+mysql

    关于springBoot是个神马东西以及优缺点,请自行搜索了解. LZ看到很多关于SpringBoot的Demo,单看一篇总是没法整合SpringBoot与Mysql.没法子,还是自己操刀来一发为妙. ...

  9. githup教程

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/瘳雪峰-Git教程http://w ...

  10. WEB中调用Nutch执行JOB抓取

    参考:在Eclipse中运行Nutch 把nutch的源代码导入到eclipse工程自定义抓取任务. 下载源码: http://svn.apache.org/repos/asf/nutch/ 从svn ...