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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. *{margin: 0;padding: 0;}
  7. .box{
  8.  
  9.        //控制该div宽高比
  10. overflow: hidden;
  11. height: 0;
  12. padding-bottom: 20%;

  13. background: #999;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div class="box">
  19. 占位
  20. </div>
  21. <p>文字文字文字</p>
  22. </body>
  23. </html>

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

  1. css控制div的各种形状

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

  2. css控制div显示/隐藏方法及2种方法比较原码 - 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. PyTorch之前向传播函数自动调用forward

    参考:1. pytorch学习笔记(九):PyTorch结构介绍 2.pytorch学习笔记(七):pytorch hook 和 关于pytorch backward过程的理解 3.Pytorch入门 ...

  2. tf.reduce_sum()函数

    1234567reduce_sum 是 tensor 内部求和的工具.其参数中: input_tensor 是要求和的 tensor axis 是要求和的 rank,如果为 none,则表示所有 ra ...

  3. CF1B.Spreadsheets(电子表格) 题解 模拟

    作者:zifeiy 标签:模拟 题目出处:Spreadsheets 题目描述 在流行的电子表格系统中(例如,在Excel中),使用如下计算方式来对列号进行计算. 第1列对应A,第2列对应B,--,第2 ...

  4. gradle 生成 pom,引用mybatis-plus源代码到自己的工程中

    一 前情概要 自己的maven工程使用mybatis-plus,然后想用热部署加载mapping文件.经过各种探索之后实现了,但是修改了xml文件后,就不断在控制台提示“mapper xxx is i ...

  5. Mockito 使用

    1. 算术测试类 package com.smart.test.mockito; public interface Calculator { public int add(int a, int b); ...

  6. python基础十之装饰器

    1,装饰器的形成 编程原则:开放封闭原则. 开放:对扩展是开放的 封闭:对修改是封闭的 因为修改是封闭的,所以为了对函数进行功能的扩展,就使用装饰器! 2,装饰器的定义 # wrapper就是一个装饰 ...

  7. The 10th Shandong Provincial Collegiate Programming Contest H.Tokens on the Segments(贪心+优先级队列 or 贪心+暴力)

    传送门 •题意 二维平面上有 n 条线段,每条线段坐标为 $(l_i,i),(r_i,i)$: 平面上的每个整点坐标上都可以放置一枚硬币,但是要求任意两枚硬币的横坐标不相同: 问最多有多少条线段可以放 ...

  8. liunx printk 函数消息是如何记录的

    printk 函数将消息写入一个   LOG_BUF_LEN 字节长的环形缓存, 长度值从 4 KB 到 1 MB, 由配置内核时选择. 这个函数接着唤醒任何在等待消息的进程, 就是说, 任何在系统 ...

  9. vue中 js获取图片尺寸 设置不同样式

    1.JS: 请求到后端数据后 判断图片尺寸 2.HTML代码 根据设置的类型,给图片添加不同的样式 3.CSS代码 添加不同尺寸的样式

  10. navicat for mysql连接本地数据库

    navicat for mysql连接本地数据库 打算使用navicat连接本地数据库,连接的时候,一直连接不上.然后猜想是不是本地数据库没有设置好.输入mysql,出错内容:access denie ...