父级div怎能么自适应子元素的高度

父级div怎能么自适应子元素的高度,第1张

父元素高度设置为空或者auto即可,如height:auto或者不要height,举例如下:

1.高度采用auto

这里是子集内容,子集内容采用的是宽度780px,高度1000px,并且居中对齐;

这是父级内容,宽度为800px,高度自适应

1、首先在编辑器建立了一个静态页面,在body中添加两个div,设置宽度,并设class 为div1和div2,在两个div的class 中添加相同的控制图片的class名为了 ”img“,并为div添加控制宽度的样式:

2、在两个div中加入相同的图片, 这个时候需要在img 类中加入css语句设置一下div的高度和宽度,以及div的边框,然后就可以设置img的样式了:

3、最后设置img的样式中图片的高度为auto,宽度为100%,这样就可以自适应浏览器了,来到浏览器,可以看到设置了自适应的图片自动填满整个div了,而没有设置的则是填充了一部分。以上就是让div自动适应自身的img高度:

div默认就是宽度最大化和高度最小化并且高度自动伸展的

父级div的高度可以随着子级div的高度增长而增长,这个最基本的情况你应该是清楚的

我想你问的问题应该是同级的div高度自适应,也就是比如平级的2个div高度自动伸展

这个效果我可以推荐你3个方法

1、使用table布局,2个平行的td高度是自动一样的

2、左右2个div不必一定要做成独立的2个平级div,可以把一个div做成父级,一个做成子级,这样通过子级的div高度调整来达到父级高度也自动伸展,不过这个方法有局限性,但也并非不可用,如果不是你想要的效果,那你就可以采用第1和第3个方法

3、通过JS达到效果,我给你一个链接事例,你可参照

http://www.lanrentuku.com/js/table-21.html

如果不是你要问的情况,那就再继续追问吧


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11933788.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存