CSS是Cascading Style Sheets的縮寫，我們中文稱為「串聯樣式表」
CSS串聯樣式表教學『標籤元素與文字間的相對位置』
  • 設定標籤元素與文字間的相對位置float屬性 ：
  • float : right; /*標籤元素向右靠.文字圍繞在左邊*/
  • float : left; /*標籤元素向左靠.文字圍繞在右邊*/
  • float : none; /*以預設位置顯示*/
標籤元素與文字間的相對位置運用範例
圖檔float運用範例
<style type="text/css">
<!--
.img{float : right; /*標籤元素向右靠.文字圍繞在左邊*/ }
-->
</style>

<img border="0" alt="圖片預設的位置" src="img.gif">這還沒有使用樣式.文字顯示在左方
<img border="0" alt="向右邊靠的圖片" src="img.gif" class="img"> 這使用了樣式.圖片向右邊靠

圖片預設的位置這還沒有使用樣式.文字顯示在左方

向右邊靠的圖片這使用了樣式 float : right 圖片向右邊靠


DIV區塊float運用範例
<style type="text/css">
<!--
#divo{float:right;width:50%;height:100px;border:1px solid #cc0}
#divt{float:left;width:50%;height:100px;border:1px solid #c60}
-->
</style>

<div id="divo">標籤元素向右靠</div>
<div id="divt">標籤元素向左靠</div>

標籤元素向右靠
標籤元素向左靠


範例解說 :

<div></div>
<div></div>
這樣兩個區塊的排列預設應該是一上一下
但將兩個區塊加上相對位置和寬度各設為50%.就會並排顯示

XHTML1.0 | CSS | Copyright © 2001-2008 by OECSPACE