扫一扫浏览

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

未结贴
0 2562
大钱端未认证 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之后,子元素高度自适应问题 2562
thinkphp5隐藏默认模块的一些问题 2219
关于thinkphp5.0.x getshell漏洞的说明 1893
【全套视频】thinkphp5视频教程 1859
教你如果处理高并发数据不同步的问题php篇 1783
移动web资源整理,你值得收藏的干货 1764
一张纸的厚度是0.01毫米,则该纸对折30次后是多厚(据说超过珠穆朗玛峰的高度)php实现 1686
PHP如何判断字符串是否为json格式 1657
tpframe新建主题 1603
omnicore rpc api中文手册【usdt】 1573
月度热议HOT COMMENTS
tpframe 后续版本你希望有的功能是什么(分享贴) 12
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
基于tpframe v3.x 的微信公众号插件已批量上线 5
tpframe插件tcms插件v2.2已发布上线,欢迎下载使用 5
新增的管理员没有权限操作CMS模块。 3
api接口文档插件easydoc的基本用法,快速搞定接口文档 3
thinkphp5自动完成操作,两次运行的详解 2
thinkphp5隐藏默认模块的一些问题 2
tpframe-curd操作之添加数据 2
爆料早知道:Tcms微信、百度小程序、微信公众号功能已全部上线我有好想法