CSS：padding实现两栏自适应 - 图片与文字左右排列，文字自适应不限宽度_CSS学习

资料来源：网络整理时间：2023/3/4 0:57:07 共计：3596 浏览

使用padding来布局，上一篇文章讲解了padding来实现两栏等高布局，本文重点讲解下两栏自适应宽度，在图片和文字组合一起的时候，让文字区域宽度自适应。

注意：这里的图片宽度是固定的，而不能随意宽度！

要实现图片固定，文字不限制宽度的自适应，那么有两种使用padding的方法。

一、padding在容器上：

原理如下：容器有个固定的padding-left值，此时图文应该在120px处显示，但是，由于图片margin负值浮动（或者绝对定位）到容器左上角，因此，文字就从容器的左上角120px处开始显示，避过图片区域，文字宽度不限，造就自适应！

原理：两栏元素均有自己的标签，其中文字栏有个固定的padding-left值，此时文字应该在距离容器左上角120px显示，但是由于图片浮动(或者绝对定位，不在流中，因此文字....

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。