標題: CSS 代码“Float” 的使用
rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3962
發表於 2013-7-1 08:52 
14.136.98.252
分享  私人訊息  頂部



使DIV层横着排列
float:left 代码的作用


代码: <div style="width:200px;height:200px;float:left;background:#cccccc;margin:30px;"></div> <div style="width:200px;height:200px;float:left;background:#cccccc;margin:30px;"></div>





rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3962
發表於 2013-7-1 08:54 
14.136.98.252


CSS 代码

Float 的使用

      进行图文排版时;我们可以通过 CSS 代码的属性 float 令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边。在此插入图片时,我们使用了 float:left 的CSS 代码,使图像浮动到文字排版的左侧。





<FIELDSET style="BORDER-RIGHT: #0000ff 1px ridge; PADDING-RIGHT: 5px; BORDER-TOP: #0000ff 1px ridge; PADDING-LEFT: 5px; PADDING-BOTTOM: 10px; BORDER-LEFT: #0000ff 1px ridge; WIDTH: 350px; height:350px; COLOR: #b7b7b7; PADDING-TOP: 0px; BORDER-BOTTOM: #0000ff 1px ridge" align=center><LEGEND align=center><FONT face="comic sans ms" color=#ff00ff size=5><B>CSS 代&#30721;</B></FONT></LEGEND><BR> <CENTER> <DIV style="WIDTH: 320px; HEIGHT: 200px"><IMG style="FLOAT: left; MARGIN: 20px" src="http://i1087.photobucket.com/albums/j474/bambu3/beuty2/1d71b01f7ddba3cfc2a7a297e7296cc0.gif"> <P align=left><FONT face="comic sans ms" color=red size=5><B><U>Float 的使用</U>:<BR></B></FONT><BR><FONTSIZE=5><FONT color=blue size=4> &#36827;行&#22270;文排版&#26102;;我&#20204;可以通&#36807; CSS 代&#30721;的&#23646;性 float 令元素向左或向右浮&#21160;。也就是&#35828;,令盒子及其中的&#20869;容浮&#21160;到文&#26723;(或者是上&#23618;盒子)的右&#36793;或者左&#36793;。在此插入&#22270;片&#26102;,我&#20204;使用了 float:left 的CSS 代&#30721;,使&#22270;像浮&#21160;到文字排版的左&#20391;。</FONT></P></DIV></CENTER></FIELDSET>

[ 本帖最後由 rainbow 於 2013-7-1 09:10 編輯 ]


rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3962
發表於 2013-7-1 09:02 
14.136.98.252


CSS 代码

Float 的使用

      进行图文排版时;我们可以通过 CSS 代码的属性 float 令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边。在此插入图片时,我们使用了 float:left 的CSS 代码,使图像浮动到文字排版的右侧。





<FIELDSET style="BORDER-RIGHT: #0000ff 1px ridge; PADDING-RIGHT: 5px; BORDER-TOP: #0000ff 1px ridge; PADDING-LEFT: 5px; PADDING-BOTTOM: 10px; BORDER-LEFT: #0000ff 1px ridge; WIDTH: 350px; height:350px; COLOR: #b7b7b7; PADDING-TOP: 0px; BORDER-BOTTOM: #0000ff 1px ridge" align=center><LEGEND align=center><FONT face="comic sans ms" color=#ff00ff size=5><B>CSS 代&#30721;</B></FONT></LEGEND><BR> <CENTER> <DIV style="WIDTH: 320px; HEIGHT: 200px"><IMG style="FLOAT: right; MARGIN: 20px" src="http://i1087.photobucket.com/albums/j474/bambu3/beuty2/1d71b01f7ddba3cfc2a7a297e7296cc0.gif"> <P align=left><FONT face="comic sans ms" color=red size=5><B><U>Float 的使用</U>:<BR></B></FONT><BR><FONTSIZE=5><FONT color=blue size=4> &#36827;行&#22270;文排版&#26102;;我&#20204;可以通&#36807; CSS 代&#30721;的&#23646;性 float 令元素向左或向右浮&#21160;。也就是&#35828;,令盒子及其中的&#20869;容浮&#21160;到文&#26723;(或者是上&#23618;盒子)的右&#36793;或者左&#36793;。在此插入&#22270;片&#26102;,我&#20204;使用了 float:left 的CSS 代&#30721;,使&#22270;像浮&#21160;到文字排版的右&#20391;。</FONT></P></DIV></CENTER></FIELDSET>

[ 本帖最後由 rainbow 於 2013-7-1 09:09 編輯 ]