扫一扫浏览

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

未结贴
0 1746
大钱端未认证 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
thinkphp5隐藏默认模块的一些问题 1794
父元素flex之后,子元素高度自适应问题 1746
【全套视频】thinkphp5视频教程 1622
教你如果处理高并发数据不同步的问题php篇 1462
关于thinkphp5.0.x getshell漏洞的说明 1408
tpframe新建主题 1332
tpframe安装教程 1309
一张纸的厚度是0.01毫米,则该纸对折30次后是多厚(据说超过珠穆朗玛峰的高度)php实现 1305
TPFrame框架robot模块重磅来袭,内附2.1版本 1303
移动web资源整理,你值得收藏的干货 1289
月度热议HOT COMMENTS
tpframe 后续版本你希望有的功能是什么(分享贴) 12
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
基于tpframe v3.x 的微信公众号插件已批量上线 5
tpframe插件tcms插件v2.2已发布上线,欢迎下载使用 4
新增的管理员没有权限操作CMS模块。 3
api接口文档插件easydoc的基本用法,快速搞定接口文档 3
thinkphp5自动完成操作,两次运行的详解 2
tpframe-curd操作之添加数据 2
tpframe能带给你的,让你快速搞定各服务端(api,pc,mobile,wechat)代码的框架 2
爆料早知道:Tcms小程序功能已上线我有好想法