padding-top：100%解决高度塌陷问题

<div class="img_box">
    <img src="http://sms-shop.oss-cnbeijing.aliyuncs.com/${item.bannerpic.split(‘,‘)[0]}"/>
</div>	

.img_box {
		position: relative;
		width: 90%;
		padding-bottom: 100%;
	}

	.img_box img {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
	}

原文地址：https://www.cnblogs.com/wsjaizlp/p/12613190.html

时间： 2024-11-09 05:14:19

padding-top：100%解决高度塌陷问题的相关文章

如何解决高度塌陷

hello 朋友们,我又来了哦!对的没错,今天的话题呢就是高度塌陷. 首先要知道什么是高度塌陷.高度塌陷其实就是指当父元素没有给确定的高度(即父元素高度靠子元素撑起来),并且子元素添加了浮动时,内容无法撑起父元素的高度,即父元素发生高度塌陷. 解决办法: 第一种,开启元素的BFC,元素将会具有如下的特性: 1.父元素的垂直外边距不会和子元素重叠 2.开启BFC的元素不会被浮动元素所覆盖 3.开启BFC的元素可以包含浮动的子元素开启元素BFC属性的方式: 一.给父元素添加声明,清除浮动 over

解决高度塌陷的方法

我们在进行页面布局的时候可以发现元素在脱离文档流后,就会出现高度塌陷问题. 众所周知高度塌陷的原因是因为子元素脱离文档流所造成的父元素塌陷(所谓的高度塌陷就是子元素和父元素不在一个层级,未设置高宽的父元素里面没有子元素的支撑就会塌陷)会影响页面布局和美观性. 以下提出几点解决方案首先我们先引出一个概念:Block Fomatting Context,我们称为块格式化上下文简称BFC,这是每个元素都具有的一个属性! 开启BFC的元素都有以下特点: 1.开启了BFC的元素与其父元素的垂直外边距不

解决高度塌陷-CSS

1:给高度塌陷的元素设置overflow:hidden; 原理:因为overflow:hidden;触发了一个BFC BFC布局规则:计算BFC高度的时候,里面的浮动元素也参与计算. 弊端:定位在当前元素外面的内容会被隐藏. 2:给出现高度塌陷的元素里面,放在浮动元素的后面,添加一个空div,并且给div{clear:both;} 原理:clear:both;忽略上面的浮动元素预留出的空间弊端:形成不必要的空标签,代码冗余 3:万能清除法: 选择符(高度塌陷的元素):after{ conten

overflow:解决 div的高度塌陷问题

高度塌陷是如何引起的? 解析: 当一个 div中所有的子 div都进行了浮动后,那么会出现该问题,那么解决方就是在父 div中设置其 overflow:hidden;即可解决高度塌陷问题. 方式二:在父 div结束标签前添加一个子的 div,给该 div设置一个 id,然后通过样式清除浮动.代码如下: #littlediv{clear:left;} //左侧不允许浮动或者是 #littlediv{clear:both;} //清除左右两侧浮动元素

解决父级元素高度塌陷问题的方法

如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候.那么它的高度就会塌缩为零,也就是所谓的“高度塌陷”,如果父级元素包含背景或者边框,那么溢出的元素就不像父级元素的一部分了.解决“高度塌陷”的问题很简单: 1.浮动父级元素如果让父级元素浮动,父级元素的高度就会扩大,直到完全包含它里面的浮动元素,虽然这个方法很奇怪,但是很有效.如果选择这种方法,一定要在该元素的下个元素添加clear:both,确保浮动元素落到父级元素的下方. 2.利用overflow:hidden,zoom:1 { ov

float浮动造成高度塌陷的解决办法

Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素都浮动了的话,父元素就“瘪”了. 就像下面这样 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">

高度塌陷的产生条件和解决方法

高度塌陷产生的原因: 高度塌陷: 当所有的子元素浮动的时候,且父元素没有设置高度,这时候父元素就会产生高度塌陷. 例如: .father{ width: 600px; /* 给父元素一个宽度 */ background-color: #008000; /* 给个背景颜色 */ } .child_1{ width: 200px; height: 200px; background-color: #00FFFF; float: left; /* 子元素浮动 */ } .child_2{ width:

高度塌陷问题

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

高度塌陷问题的解决方案

高度塌陷问题是前端新人在布局中遇到的头疼问题,然而,解决这个问题之前,我们需要先明白高度塌陷问题产生的原因. 我们知道,一个块元素在没有设置宽和高的情况下,宽度默认占满父元素全部,而高度默认被子元素撑开,如图A1父元素没有设置宽高,而其高度被子元素a1撑开为200px,宽度默认是body的宽度,如图. 而高度塌陷问题的产生,源于子元素的浮动,而浮动,则是会脱离文档流,脱离文档流,意味着脱离常规网页布局,其他盒子在布局时会忽略浮动盒子的影响,而浮动的盒子也会默认上升一个层级,如图,在这里我设置了