DIV+CSS:float属性

回到我们的例子当中,理解了块级元素和内联元素,对理解浮动就容易多了。float是个重点,希望大家都能理解。上例中用float让元素向左浮 动,在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素;且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素 时,它会跑到下一行,直到拥有足够放下它的空间。

想必大家都用过word排过版,当中有个图文混排功能,如下图:

这个功能非常类似于css中的浮动,下面我们用css来实现这一功能:

    <div id="side"><img src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif" width="192" height="142" /></div> 
    <div id="main"> 标准之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,
    DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构,
    网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!</div>

 

创建完以上代码后,在浏览器中预览会显示如下结果:

下面用css让side浮动,再看看效果

    body { font-size:18px; line-height:200%; } 
    #side { float:left;}

 

大家看看,是不是和word的效果已经很像相了,但这里的文字和图片右侧贴的很近,怎么办呢?刚才已经说了,当元素浮动过之后,需要指定一个宽度, 否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度,它们中间应该就有空隙了。图片的宽度是192px,设置side为202px,中间将会有 10px的空隙了。

    body { font-size:18px; line-height:200%; } 
    #side { float:left; width:202px;}

 

细心的朋友已经发现,上例中#main的div还定义了margin-left:120px;而这里没有定义,但它多出的文字却跑到了图片 (#side)的下方,是不是设置margin-left:后,它就不会跑到#side的正文呢?如果你能想到这一点,你的确是太聪明了,事实确实是这 样,在css样式表中加上下面一行

    #main { margin-left:202px;}

 

这就是如何应用浮动实现两列布局的原理。那么三列呢?

赞(0) 打赏

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址