<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>纯CSS实现Div高度根据自适应宽度（百分百调整）</title>

    </head>

    <style>

        .father {

            width: 100px;

            height: 100px;

            background: #222

        }

        .element {

            width: 50%;

            height: 0;

            padding-bottom: 50%;

            background: #eee;

        }

    </style>

    <body>

        <div class="father">

            <div class="element">

123

            </div>

        </div>

    </body>

</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. Feign 与 Hystrix

    Feign 与 Hystrix Feign是一个声明式的web服务客户端,它使得web服务调用非常的简单,当我们使用Feign时,Spring Cloud 整合了Ribbon和Eureka,从而为我们 ...

  2. myBatis学习之路1-基本功能实现

    myBatis也是一个持久型框架,相较于hibernate来说,算是轻量级的. 1.配置mybatis环境 相关jar下载地址:mybatis+mysalJAR包 2.新建一个java project ...

  3. Shell 变量知识

    1.自定义变量:自定义变量不能以数字开头. ()root#a=’cd /etc/’ #设置自定义变量. root#etho $a #使用变量. 2.全局变量:export可设置全局变量不能以数字开头. ...

  4. 剑指offer（49）把字符串转换成整数。

    题目描述 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 数值为0或者字符串不是一个合法的数值则返回0 输入描述: 输入一个字符串,包括数字字母符号,可以为空 输出描述: 如果是合法 ...

  5. Ubuntu 16.04下vsftpd 安装配置实例

    从https://www.linuxidc.com/Linux/2017-06/144807.htm转载 第一步:安装VSFTPD sudo apt-get install vsftpd 安装完成后启 ...

  6. Windowsphone8外包团队——wp8控件学习资源整理

    一天一天学 windows phone 控件 之  Slider(十七) 摘要:Slider 是我们最常见的控件之一,看到最多的一般在两个地方 ,一个是声音的大小,一个是色域.控制声音大小的网上很多, ...

  7. ios外包公司——技术分享：手机应用开发步骤

    1. 确定你的创意 您的创意是否有人做过,如果有类似的app,那就要多多考虑,争取超越并且有一些独特的优化设计在其中 2. 定位应用 通过苹果的人机界面指南(Human Interface Guide ...

  8. FileZilla客户端连接腾讯云FTP服务器时出现“227 Entering Passive Mode”

    FTP的主动模式(PORT Mode)及被动模式(Passive Mode) FTP的特殊性: 大多数的TCP服务是使用单个的连接,一般是客户向服务器的一个周知端口发起连接,然后使用这个连接进行通讯. ...

  9. Series 和 Dataframe 的 rank 方法

    rank 方法返回的是当前数据的排名名次,而 sort——values() 返回的是排名之后数据的结果 rank()用法 sort_values()用法

  10. 决策树算法原理(ID3，C4.5)

    决策树算法原理(CART分类树) CART回归树 决策树的剪枝 决策树可以作为分类算法,也可以作为回归算法,同时特别适合集成学习比如随机森林. 1. 决策树ID3算法的信息论基础   1970年昆兰找 ...