• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

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

当前位置：网站建设 > 技术支持

上一篇文章讲解过一个《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>

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