扫一扫浏览

父元素flex之后,子元素高度自适应问题

未结贴
0 5080
大钱端未认证 2018-09-15 14:57:08
收藏

在我们做排版时候,特别是在做手机端自适应的情况,例如有3张图片,各分等比例排在一行,代码如下:


<div class="img">

   <img src="images/1.jpg"/>

   <img src="images/1.jpg"/>

   <img src="images/1.jpg"/>

</div>


当然你的CSS有其它写法可以达到平分的功能,我这里指的是父元素设置flex的情况,CSS代码如下


.img{

  width:100%;

  display:-webkit-box;

  display:-webkit-flex;

  display:-ms-flexbox;

  display:flex;

  -webkit-box-pack:justify;

  -webkit-justify-content:space-between;

  -ms-flex-pack:justify;

   justify-content:space-between;

}


.img img{

  width:33%;

  height:auto;

}


这种版本的情况,如果你的宽度变化的情况,图片的宽度会跟着变化,但高度的auto你会发现不起作用


OK这种情况你可只须要多添加一个align-self:flex-start;即可



.img img{

  width:33%;

  height:auto;

  align-self: flex-start;

}


当然你也可以给img各嵌套容器来实现


tpframe原创文章,转载请注明出处


最近热帖 HOT TOPIC
父元素flex之后,子元素高度自适应问题 5081
thinkphp5隐藏默认模块的一些问题 4741
一张纸的厚度是0.01毫米,则该纸对折30次后是多厚(据说超过珠穆朗玛峰的高度)php实现 4403
关于thinkphp5.0.x getshell漏洞的说明 4126
tpframe新建主题 4071
教你如果处理高并发数据不同步的问题php篇 4059
移动web资源整理,你值得收藏的干货 3927
【全套视频】thinkphp5视频教程 3906
omnicore rpc api中文手册【usdt】 3878
2018最新版PHP视频教程-ThinkPHP5商城系统+项目实战 3789
月度热议HOT COMMENTS
tpframe 后续版本你希望有的功能是什么(分享贴) 12
权限那里怎么一登录别的账号就报错啊 9
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
基于tpframe v3.x 的微信公众号插件已批量上线 5
tpframe插件tcms插件v2.2已发布上线,欢迎下载使用 5
tpframe6.0马上就要跟大家见面了,一次全新的升级 5
新增的管理员没有权限操作CMS模块。 3
api接口文档插件easydoc的基本用法,快速搞定接口文档 3
thinkphp5自动完成操作,两次运行的详解 2