可能大家经常会有这样的需求: 某段文字有个配图，配图和文字段落保持在同一水平线上，但窗体的高度和宽度不固定，需要自适应。
像下面这张图，图片要跟红色的文字保持在同一水平线：
最终代码实现的效果：Auto Position
我们通常的做法是这样的:
<!-- html structure -->
<div id="test">
<p>
<img src="img1.jpg" alt="sofish" />
文字文字文字...
</p>
<p>
<img src="img1.jpg" alt="sofish" />
文字文字文字...
</p>
...
</div>
/* CSS Code */
/* 给每个 P 设置相对定位 */
#test p{position:relative;padding-right:100px;}
/* 给每个 img 设置相对于 P 的绝对定位 */
#test img{
position:absolute;
top:0;
right:0;
}
是的。就是这样。其实，这已经是一个非常棒的实践了。不使用 float，代码也很简单。这也是我一直推荐使用的。不过，其实，POSITION 属性里面还有一个不常被大家发现的 TRICK。其实我们可以这样写：
/* 给容器设置相对定位 */
#test{position:relative;padding-right:100px;}
/* 给每个 img 设置相对于容器的绝对定位 */
#test img{
position:absolute;
/* top:0; 不要设置顶对齐，这样就会自适应定位了 */
right:0;
}
这样减少了选择器的渲染，只有一个父容器；另外又减少了字节，不需要 top:0; 虽然性能提升和流量节省并不是很明显，但如果有更棒的方法，以为何不使用呢？