前端web设置div宽高一样
<div class="constant-width-to-height-ratio"></div>
.constant-width-to-height-ratio {
background: #333;
width: 50%;
}
.constant-width-to-height-ratio::before {
content: '';
padding-top: 100%;
float: left;
}
.constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;
}
前端web设置div宽高一样的更多相关文章
- 关于html中的设置body宽高的理解
有时候看到别人的代码中经常出现在body中设置的宽高,不是很理解,于是自己测试了下,瞬间懂了,废话不多说,直接上代码: 首先创建好一个基本的html文件,设body的背景色为red: 相信大家都知道效 ...
- input与select 设置相同宽高,在浏览器上却显示不一致,不整齐
遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input width,height 值里面, 不 ...
- vue 动态获取div宽高有时候为0的情况
项目背景: 需要使用echarts进行图表展示.由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中. 需要使用 this.$nextTick(() => { }) ...
- Python设置浏览器宽高
# 发起请求,设置浏览器宽高 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要对应版本的Ch ...
- 前端之css(宽高)设置小技巧
一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...
- absolute和relative元素 设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
- div宽高不确定,内容居中
当div的宽高不确定时候,内容居中:// 加在父级div中 垂直居中:align-items:center; display: -webkit-flex;水平居中:justify-content:ce ...
- 偏前端 - 不是固定宽高,页面随设备同比 放大/缩小 展示。不妨看看rem单位,你就有眉目上手做了!!!
为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类 ...
- div宽高设置为百分比
如果你将div的width和height设置为百分比,但是发现页面都不见了,这是因为父标签也要设置为百分比,也就是说body和html的宽高也需要设置为百分比 #containter{ width:1 ...
随机推荐
- 09安装运行redis-trib.rb所需的环境
运行redis-trib.rb脚本配置Redis的cluster,需要安装ruby环境,这里采用源码安装: 1:下载源码包: https://cache.ruby-lang.org/pub/ruby/ ...
- sulin LuceneNet 搜索二
1.添加引用dll using Lucene.Net.Search;using Lucene.Net.Analysis.PanGu;using PanGu;using PanGu.HighLight; ...
- 使用pdf.js在移动端预览pdf文档
pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持. 在线演示地址:http://mozilla.github.com/pdf.js/web/viewe ...
- java 7,8 排序异常
排序报 java.lang.IllegalArgumentException: Comparison method violates its general contract! 要明确返回-1, 0, ...
- day37 02-Hibernate二级缓存:二级缓存的散装数据
一级缓存存放的是对象的地址.把对象的地址缓存下来了.二级缓存里面存放的是对象的散装数据.你再去获取的时候,因为一级缓存的生命周期结束了,它会从二级缓存中获取.从二级缓存中获取,因为它又会得到一个对象. ...
- CentOS 6.8 Java 环境搭建
1.搜索 Java 1.7 64 2.下载 文件 3.Xshell 安装lrzsz 4.选择路径 5.使用 rz 命令选择上传 6.打开 /etc/profile vim /etc/profile ...
- VI/VIM编辑器快捷键
常用快捷键: Ctrl+f 向下翻页 Ctrl+b 向上翻页 G 移动到文件最后一行 gg 移动到文件第一行 N+回车 ...
- Poj 1182种类(带权)并查集
题目链接 食物链 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 44316 Accepted: 12934 Descriptio ...
- ACdream 1099求第k大
题目链接 瑶瑶的第K大 Time Limit: 10000/5000MS (Java/Others)Memory Limit: 512000/256000KB (Java/Others) Submit ...
- jquery 设置 html标签响应式布局
function sWidth() {//计算当前设备宽度 var widthSize; if ($(window).width() <= 640) { widthSize = $(window ...