位置：广州松河 > 技术支持 > CSS：margin 一侧定宽自适应布局，取消文字环绕图片的方法_CSS学习

CSS：margin 一侧定宽自适应布局，取消文字环绕图片的方法_CSS学习

来源：网络整理时间：2023/3/4 0:57:06 共 3671 浏览

上一篇文章讲解过一个《padding实现两栏自适应》，今天还是用这个类似的案例，讲解下，在maigin技巧，一侧定宽的自适应布局，避免文字环绕图片的方法！

注意：本文分享的方法，是基于margin可以改变无固定width和height的普通black水平元素宽度！

首先，看正常环绕的最简单代码：

<style>
 .box{width: 250px; border: 1px solid #f35}
 .box img{float: left; border: 1px solid;}
</style>
<div class="box">
 <img src="tao/images/icon.png">
 <p>这里是右侧文字，这里是右侧文字，这里是右侧文字，这里是右侧文字，这里是右侧文字。
 这侧文字......</p>
</div>

注：只对图片进行了左浮动，右侧p标签也被浮动，文字环绕。

其次，再看使用margin-left改变p内文字的可是宽度，margin有可以改变不定宽元素的可视宽度的作用！

所以，看图：

<style>
 .box{width: 250px; border: 1px solid #f35}
 .box img{float: left; border: 1px solid;}
 .box p{margin-left: 120px;}
</style>
<div class="box">
 <img src="tao/images/icon.png">
 <p>这里是右侧文字，这里是右侧文字，这里是右侧文.........</p>
</div>

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

·上一条：margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例！_CSS学习 | ·下一条：CSS：padding实现两栏自适应 - 图片与文字左右排列，文字自适应不限宽度_CSS学习