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

（转）学习css之郁闷篇-先有鸡还是先有蛋

2024-07-20 14:13:12   217人阅读

原文链接：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之郁闷篇-先有鸡还是先有蛋


联系
我们