在移动端开发中，在banner轮播图未加载出来之前，banner层是不占文档流高度的，当从服务器获取完banner数据，展示的时候，banner层因为有了内容 所以会撑开，导致banner层下面的内容也随之移动，为解决此bug，可以控制下banner层的宽高比

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        *{margin: 0;padding: 0;}

        .box{

　　　　　　　//控制该div宽高比

            overflow: hidden;

            height: 0;

            padding-bottom: 20%;



            background: #999;

        }

    </style>

</head>

<body>

    <div class="box">

        占位

    </div>

    <p>文字文字文字</p>

</body>

</html>

css控制div等比高度的更多相关文章

  1. css控制div的各种形状

    css控制div的各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用. 以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可 ...

  2. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  3. CSS控制div宽度最大宽度/高度和最小宽度/高度

    在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟 ...

  4. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  5. 前端学习笔记2017.6.12 CSS控制DIV

    前一篇文章中用div布局了豆瓣东西的页面,如果用html代码表示的话大概是这个样子的 <!DOCTYPE html><html><head></head> ...

  6. 用CSS控制DIV居中失效的解决方法

    1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  7. css控制div下图片自适应解决方法:图片不超过最大宽度

    我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...

  8. Css控制div水平垂直居中显示

    <style>#info{height:0px; width:0px;top:50%; left:50%;position:absolute;}#center{background:#FF ...

  9. css控制div强制换行

    div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{word-br ...

随机推荐

  1. 【原生JS】制作网页头部刷新进度条

    之前的某次番啬看到油管上有这么一个进度条,当时觉得挺好玩,一直想着做一个试试,刚才弄了一下写了一个不算太好看的简陋版本,哈哈. (本博客刷新会头部会出现,因为并没有真正的参与到浏览器加载是否完整这个渲 ...

  2. HDU 2191多重背包问题、

    #include<cstdio> #include<cmath> #include<iostream> #include<cstring> +; int ...

  3. 2019-9-9-dotnet-获取本机-IP-地址方法

    title author date CreateTime categories dotnet 获取本机 IP 地址方法 lindexi 2019-09-09 15:56:33 +0800 2019-0 ...

  4. Spring Boot JPA 懒加载

    最近在使用spring jpa 的过程中经常遇到懒加载的错误:"` org.hibernate.LazyInitializationException: could not initiali ...

  5. Vue的事件修饰符

    转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...

  6. 记录vue创建项目过程

    已经学过无数次,但是每次都忘记,毕竟脑容量太小了,每次都需要翻看原来项目和视频再次学习,所以以此文字形式记录下来,方便于下次使用观看 1.打开git,找到创建vue的文件夹(已经安装好git的,然后在 ...

  7. PowerShell 使用 WMI 获取信息

    在 PowerShell 可以很容易使用 WMI 拿到系统的信息,如果有关注我的网站,就会发现我写了很多通过 WMI 拿到系统的显卡,系统安装的软件等方法,本文告诉大家如果通过 PowerShell ...

  8. 路由器OpenWrt如何脱机(离线)下载BT文件

    路由器OpenWrt如何脱机(离线)下载BT文件 1.首先到如下网址下载OpenWrt固件(确保为路由器正确型号). http://downloads.openwrt.org/snapshots/tr ...

  9. HDU6579 2019HDU多校训练赛第一场1002 （线性基）

    HDU6579 2019HDU多校训练赛第一场1002 (线性基) 传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6579 题意: 两种操作 1.在序列末 ...

  10. 利用Feed43为网站自制RSS源

    什么是RSS,它可以做什么 快2020年了,RSS日渐式微,我也是去年机缘巧合下才开始使用的,以前只是听说过.RSS,全称Really Simple Syndication,又称简易信息聚合(也叫聚合 ...