在移动端开发中，在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. 2018-8-10-win10-uwp-使用-Geometry-resources-在-xaml

    title author date CreateTime categories win10 uwp 使用 Geometry resources 在 xaml lindexi 2018-08-10 19 ...

  2. Codeforces Round #183 (Div. 2)

    A. Pythagorean Theorem II 暴力,\(O(n^2)\). B. Calendar 每个日期计算到0年1月1日的天数,相当于转化成前缀和形式. 闰年数计算\[\lfloor\fr ...

  3. Java 自带性能监控工具：监视和管理控制台 jconsole 的使用

    1. 前言想验证你对 jvm 配的一些调优参数(比如 Xms.Xmx 等)有没有起作用吗?想不想实时监控你自定义的线程池的在实际运行时的线程个数.有没有死锁?应用出现 java.lang.OutOfM ...

  4. ubuntu snmp 安装与配置

    0.说明 关于一个完整的教程,还是那句话,国内的要么不完整,要么就太旧了,而且思路也不清晰,所以这里写一篇完整的给大家分享一下. 虽然对于Linux主机的监控可以通过执行特定的命令来完成,但是相比之后 ...

  5. redis cluster和hash slot

    redis cluster介绍 从redis3.0.0开始,官方支持了redis cluster的集群模式,结束了redis没有集群的时代. redis cluster 支撑 N 个 redis ma ...

  6. linux seqlock 锁

    内核包含了一对新机制打算来提供快速地, 无锁地存取一个共享资源. seqlock 在这 种情况下工作, 要保护的资源小, 简单, 并且常常被存取, 并且很少写存取但是必须要快. 基本上, 它们通过允许 ...

  7. C# 从零开始写 SharpDx 应用 绘制基础图形

    本文告诉大家通过 SharpDx 画出简单的 2D 界面 本文属于 SharpDx 系列 博客,建议从头开始读 本文分为两步,第一步是初始化,第二步才是画界面 初始化 先创建 RenderForm 用 ...

  8. 【31.95%】【CF 714B】Filya and Homework

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  9. 基于koa2操作mysql封装例子

    新建better-mysql.js const mysql = require('mysql'); const config = require('../config/sqlConfig.js') l ...

  10. 2019浙江ACM省赛——部分题目

    有一些题目过了我还没有重新写,先放一些我重新写好了的吧 签到题拿到了信心吧,9分钟写完两题,我们贼开心,我大哥说签到题有什么好开心的,如果不是我有一些地方卡了下,可能还是更快吧,还有就是测试案例多试了 ...