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
如果不是你要问的情况,那就再继续追问吧
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)