(转)学习css之郁闷篇-先有鸡还是先有蛋
2014-09-01 15:56
309 查看
原文链接:http://www.cnblogs.com/Dtscal/archive/2011/08/28/2155947.html
本来想要的结果是这样
个人认为:理论上代码应该是这样的先在div里面插入文字然后在插入img,最后设置img的对齐方式。大致效果应该能出来。
Css代码
可惜那毕竟是自己的理论上,实践证明我那样的理论的到的结果是这样的
搞的自己相当的郁闷,与源代码比较没啥区别,没啥区别=有区别:img和文字的顺序反了。为什么会出现这样的结果呢?参考了蓝色理想的《CSS文档流与块级元素和内联元素》终于明白浏览器的文档流内联元素,块级元素。文字在前,且没有设置浮动。会从上到下一行一行的往下排列。然后才是img,如果不设置img的浮动,那么会在左边。因为css默认左对齐,这样图片只会在文字下面,不管图片居左还是居右。那为什么把img和文字先后对调一下就能实现了呢。关键也在文档流和float。借用蓝色理想的话说:每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动.
因为img设置了float,所以会飘在右边。而文字没有设置float。所以当文字遇到img会自动往下重新排列!
哦,原来这么就有鸡和蛋了!^#^
本来想要的结果是这样
个人认为:理论上代码应该是这样的先在div里面插入文字然后在插入img,最后设置img的对齐方式。大致效果应该能出来。
<div id="top-photo"> 高档礼品 在本公司购买婚庆用品满千元即可获赠高档相册一个 <img src="images/6421.gif" width="80" height="80" /> </div> |
#top-photo img{ float:right; } |
搞的自己相当的郁闷,与源代码比较没啥区别,没啥区别=有区别:img和文字的顺序反了。为什么会出现这样的结果呢?参考了蓝色理想的《CSS文档流与块级元素和内联元素》终于明白浏览器的文档流内联元素,块级元素。文字在前,且没有设置浮动。会从上到下一行一行的往下排列。然后才是img,如果不设置img的浮动,那么会在左边。因为css默认左对齐,这样图片只会在文字下面,不管图片居左还是居右。那为什么把img和文字先后对调一下就能实现了呢。关键也在文档流和float。借用蓝色理想的话说:每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动.
因为img设置了float,所以会飘在右边。而文字没有设置float。所以当文字遇到img会自动往下重新排列!
哦,原来这么就有鸡和蛋了!^#^
相关文章推荐
- 学习css之郁闷篇-先有鸡还是先有蛋
- 傲游3的广告过滤自定义规则【Mark一下】对CSS语法学习还是挺不错了~~可定义站点样式
- 郁闷,今天学习数据结构的链表,结果被模板给郁闷住了,动手能力还是要加强
- 同50米学习写CSS
- 学习CSS的10大理由
- CSS层叠样式的学习[2]
- 昨晚开始了为期3个月的初级德语课,课上大家跟老师咿咿呀呀,仿佛回到了蒙学时代,感觉还是不错的!在blog里增加一个GERMAN随笔分类主要是方便自己随时学习,勿怪!Vielen Dank!
- 学习Struts(1)-郁闷的第一步,环境问题
- 实现网页设计标准--CSS学习收藏(1)
- css学习的一些心得
- CSS学习从入门到精通
- 今天改变了CSS,向hbzxf(阿好)学习!!
- CSS学习第一章 HTML与CSS
- CSS学习之第二章《选择符与结构》(3)
- 讨论:大学生学习算法重要还是学习类库,语法重要
- CSS失效的郁闷
- 我对学习还是没有什么激情,怎么办
- 郁闷啊,看了半天shark,可是还是无法把源代码运行起来
- 我还是不用日货,但是我学习日本人
- CSS学习之第二章《选择符与结构》(2)