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. Struts2框架学习(二) Action

    Struts2框架学习(二) Action Struts2框架中的Action类是一个单独的javabean对象.不像Struts1中还要去继承HttpServlet,耦合度减小了. 1,流程 拦截器 ...

  2. Angular - - filter 过滤器

    Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...

  3. OGG数据仓库以及单向复制(一)

    Item Source System Target System Platform OEL5.4 OEL5.4 Hostname gc1 oraclelinux54.cuug.net Database ...

  4. 关于如何正确地在android项目中添加第三方jar包

    在android项目中添加第三方jar包虽然不是一个很复杂的问题,但是确实给很多开发者带来了不小的困扰.我自己就曾经碰到过calss not found exception.error inflati ...

  5. Adobe Flash Builder 4.7 新功能详解

    Adobe Flash Builder 4.7 Beta终于公开测试了.虽然版本号只增加了.1,增强的新功能可是一点也不含糊.我们一起来看看到底有什么新功能吧!   在我看来,最大的改变是终于提供64 ...

  6. Markdown使用教程

    Markdown 是一种 轻量级标记语言,主要特点是:使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档". 本文参考了:语法手册.简书介绍. 常用语法 一.标 ...

  7. [html]关于html标签的一些总结

    以下内容纯属个人对项目细节的总结,因为只是为了自己回顾方便,所以比较杂乱. 1.img 如果不指定img的高度和宽度,则img显示的是原图片的大小:如果只指定了高度和宽度中的一者,则为指定的一者等比例 ...

  8. python之twisted模块安装

    Twisted是一个事件驱动的网络框架. 最近开始学习了解Twisted,首先肯定要安装twisted模块. 但是在cmd下执行:pip install twisted 出现了下面的问题:" ...

  9. [Bullet3]常见物体和初始化

    官方文档:http://bulletphysics.org 开源代码:https://github.com/bulletphysics/bullet3/releases API文档:http://bu ...

  10. linux pagecache与内存占用

    实验环境 CentOS Linux release 7.3.1611 (Core)  3.10.0-514.6.1.el7.x86_64   一.概念介绍      linux系统中通常使用free命 ...