CSS是Cascading Style Sheets的縮寫，我們中文稱為「串聯樣式表」
CSS串聯樣式表教學『標籤元素與文字間的相對位置』
  • 設定標籤元素與文字間的相對位置clear屬性 ：
  • clear : right; /*標籤元素向右靠.左方不能有任何文字*/
  • clear : left; /*標籤元素向左靠.右方不能有任何文字*/
  • clear : both; /*標籤元素兩邊都不能有任何文字*/
  • clear : nono; /*以預設位置顯示*/
標籤元素與文字間的相對位置運用範例
DIV區塊clear運用範例
當我們在製作上一篇區塊相對位置(DIV區塊float運用範例), 因為區塊變成浮動層,兩個區塊內的文字長度不同,下一個區塊可能會往上跑, 例如下:

<style type="text/css">
<!--
#divs{float:right;width:200px;border:1px solid #cc0;}
#divr{float:left;width:200px;border:1px solid #c60;}
#divb{border:1px solid #39c;}
-->
</style>

<div id="divs">區塊divs<br />區塊divs<br />區塊divs</div>
<div id="divr">區塊divr</div>
<div id="divb">區塊divb</div>

區塊divs
區塊divs
區塊divs
區塊divr
區塊divb


我們只需要在第三個區塊#divb加上clear : both;
就可以解決這個問題
#divb{border:1px solid #39c;clear : both;}

區塊divs
區塊divs
區塊divs
區塊divr
區塊divb

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