本来想要的结果是这样
个人认为：理论上代码应该是这样的先在div里面插入文字然后在插入img，最后设置img的对齐方式。大致效果应该能出来。
<div id="top-photo"> 高档礼品 在本公司购买婚庆用品满千元即可获赠高档相册一个 <img src="images/6421.gif" width="80" height="80" /> </div> |
Css代码
#top-photo img{ float:right; } |
可惜那毕竟是自己的理论上，实践证明我那样的理论的到的结果是这样的
搞的自己相当的郁闷，与源代码比较没啥区别，没啥区别=有区别：img和文字的顺序反了。为什么会出现这样的结果呢？参考了蓝色理想的《CSS文档流与块级元素和内联元素》终于明白浏览器的文档流内联元素，块级元素。文字在前，且没有设置浮动。会从上到下一行一行的往下排列。然后才是img，如果不设置img的浮动，那么会在左边。因为css默认左对齐，这样图片只会在文字下面，不管图片居左还是居右。那为什么把img和文字先后对调一下就能实现了呢。关键也在文档流和float。借用蓝色理想的话说：每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动.
因为img设置了float，所以会飘在右边。而文字没有设置float。所以当文字遇到img会自动往下重新排列！
哦，原来这么就有鸡和蛋了！^#^