1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>纯CSS实现Div高度根据自适应宽度（百分百调整）</title>
  6.  
  7.     </head>
  8.     <style>
  9.         .father {
  10.             width: 100px;
  11.             height: 100px;
  12.             background: #222
  13.         }
  14.  
  15.         .element {
  16.             width: 50%;
  17.             height: 0;
  18.             padding-bottom: 50%;
  19.             background: #eee;
  20.         }
  21.     </style>
  22.  
  23.     <body>
  24.         <div class="father">
  25.             <div class="element">
  26. 123
  27.             </div>
  28.         </div>
  29.     </body>
  30.  
  31. </html>

纯CSS实现Div高度根据自适应宽度（百分百调整）的更多相关文章

  1. 纯Css实现Div高度根据自适应宽度（百分比）调整

    在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...

  2. div高度不能自适应（子级使用float浮动，父级div高度不能自适应）

    1.问题截图: 2.问题描述: 由于地址.公司名长度的不定性,所以每一条地址所在的父级div高度不定,但是需要设置一个最小的高度min-height:48px;但是当内容增加的时候,父级div高度却不 ...

  3. css中div高度自适应

    高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...

  4. CSS实现div高度自适应

    1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...

  5. <转载>如何解决子级用float浮动父级div高度不能自适应的问题

    转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...

  6. 纯css实现div中未知尺寸图片的垂直居中

    1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...

  7. 让一个父级div根据子级div高度而自适应高度

    需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...

  8. css设置div高度与宽度相等的一种方法

    div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百 ...

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

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

随机推荐

  1. utf8 vs utf8mb4

    UTF-8 is a variable-length encoding. In the case of UTF-8, this means that storing one code point re ...

  2. Python基础(二)自定义函数

    1.判断字符串,内容是否为数字 我们用python:xlrd读Excel内容时,本来只是输入的整数字,经常读出来的是float类型 我们需要自动转成整型,意思就是说,读出来的和我们输入的一样,但是,我 ...

  3. JS关键字和保留字汇总(小记)

    ECMA-262 描述了一组具有特定用途的关键字.这些关键字可用于表示控制语句的开始或结束,或者用于执行特定操作等.按照规则,关键字也是语言保留的,不能用作标识符.以下就是ECMAScript的全部关 ...

  4. Divide the Sequence (贪心)

    题意:求将一串数据尽可能多分成所有前缀和大于0的连续子串. 思路:由于是要求所有前缀和大于0,那么只要从后往前推就好了. #include<bits/stdc++.h> using nam ...

  5. JavaScript 声明提前机制

    声明提前机制 在JavaScript存在着这样一种预处理机制,即浏览器在解析JS代码时会将var声明的变量和function声明的函数提升到当前作用域的顶部.但是解析JS代码时对var和functio ...

  6. <转>jmeter（二十一）jmeter常用插件介绍

    本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...

  7. mysql获取随机字符串和随机数的方法

    在我们开发的过程中,我们可能会需要在表中随机生成一些数据以供我们进行相应的测试. 就像我之前发的“mysql创建存储过程向数据表中加入规定条数的数据” 那么我们应该怎样生成随机的字符串和随机数字呢? ...

  8. 代码覆盖率-JaCoCo

    代码覆盖率 在做单元测试时,代码覆盖率常常被拿来作为衡量测试好坏的指标,甚至,用代码覆盖率来考核测试任务完成情况,比如,代码覆盖率必须达到80%或 90%. JaCoCo Jacoco从多种角度对代码 ...

  9. 表达式引擎aviator

    Aviator是一个轻量级.高性能的Java表达式执行引擎, 本文内容主要来自于官方文档 简介 包依赖 使用手册 执行表达式 使用变量 exec 方法 调用函数 自定义函数 编译表达式 访问数组和集合 ...

  10. 【Python】【内置函数】

    [fromkeys()] -- coding: utf-8 -- python 27 xiaodeng python之函数用法fromkeys() fromkeys() 说明:用于创建一个新字典,以序 ...