首页 > 代码库 > (转)学习css之郁闷篇-先有鸡还是先有蛋

(转)学习css之郁闷篇-先有鸡还是先有蛋

原文链接:http://www.cnblogs.com/Dtscal/archive/2011/08/28/2155947.html

本来想要的结果是这样

个人认为:理论上代码应该是这样的先在div里面插入文字然后在插入img,最后设置img的对齐方式。大致效果应该能出来。

<div id="top-photo">

高档礼品 在本公司购买婚庆用品满千元即可获赠高档相册一个

<img src="http://www.mamicode.com/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会自动往下重新排列!

哦,原来这么就有鸡和蛋了!^#^

(转)学习css之郁闷篇-先有鸡还是先有蛋