css布局难题：图片靠右，却留白？
网页设计中，常需将图片置于右侧，并紧贴页面边缘，避免影响文本显示。然而，单纯使用Float: right有时并不能如愿，反而留下多余空白。本文将通过案例分析，讲解如何有效解决此问题。
问题： 用户希望图片靠右，紧贴页面右边界，但使用float: right后，图片占据了文本空间，导致文本错位。代码如下：
<div id="father"> <div class="new"> <div class="aa">@@##@@</img></div> 老板是汉语词汇，拼音是lǎo bǎn，意思是对商家的敬语。这个称谓由来于南方，是先哲对工商中那些主导者的敬称。上土下匕是为老，门中有品乃为板。老板一词其实自古就有，南方人称“老板”，指的是商号的主人，也就是北方说的“掌柜，东家等等”的意思。老字... </div> </div>
#father { width:310px; margin:0 auto; font-size:14px;} .new { line-height: 25px; width:288px; margin:0 auto; border:#999 1px solid; } .aa { position: relative; right:-194px; float:right;}
问题根源在于float: right虽然使图片靠右，但它仍占据文档流空间，导致文本环绕图片，留下空白。
解决方案：巧用绝对定位
立即学习“前端免费学习笔记（深入）”；
通过将父元素设为相对定位，图片元素设为绝对定位，即可摆脱文档流限制。
将#father设为position: relative，.aa设为position: absolute，并设置top: 0; 和 right: -194px;。top: 0;确保图片位于父元素顶部，right: -194px;将图片向右移动（数值需根据图片大小和页面布局调整）。修改后的代码：
#father { position: relative; } .aa { position: absolute; top: 0; right: -194px; /* 需要根据实际情况调整 */ }
如此，图片脱离文档流，不再影响文本排列，实现图片紧贴右侧边框的效果。 注意：right值需根据实际情况调整，确保图片精确定位于右侧。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
