CSS應用實例(5)-文繞圖

繞圖在排版上來說是很常見的一種用法。我們在Word插入圖片的時候,預設圖的位置是「與文字排列」,也常使用「矩形」或「緊密」的方式排列,讓文字繞著圖跑。利用CSS的語法 float,可以設定我們想要的文繞圖方式,也可以製作出首字放大的效果。

參考 float 的語法,它的值基本上只有分 left(左)、right(右),主要是看我們要擺左邊還是右邊,是很簡單的語法。上一段的首字放大,是用下面語法做出來的效果(因為受到網誌佈景的影響,顯示的效果會略有不同):

first_letter {
    font-size:24px;     /* 字體放大到24pt */
    float:left;     /* 文繞圖-置左 */
    background-color:black; /* 背景塗黑 */
    color:white;        /* 字的顏色為白色 */
    padding:1px;        /* 邊緣與文字間距1pt,避免字太貼近邊緣 */
    margin-right:3px;   /* 與右邊物件間距3pt,避免旁邊的字貼在 */
}

附帶一題,我們常用DIV設定物件的CSS,如果是文字中的某些內容(像上面的範例是第一個字),則用span或其它文字標註語法來設定即可。當然,所有的HTML標籤都可以根據自己的需求套用CSS語法。

有的時候CSS的文繞圖也是很麻煩的,如果我們不會善用它,那麼版面很容易會亂掉。例如我想要連續插入二張圖,但是我要它是垂直並排,而不是像左邊那樣變成水平排列。如果我在二張圖片上加入float(無論左右),就會變成左邊水平排列的效果。要變成右邊的垂直並排,必需在二張圖片外加入DIV標籤,把二張圖示為同一個物件,再設定float。參考語法如下:

當我們有二段文字都有設定文繞圖時,很容易出現這段的囧境。

因為第一段的內容並沒有多到足以把第二段圖片擠下去。

要解決這個問題,就要利用 clear 語法了。

<p>
  只要在段落<p>中加入 clear 語法,就可以解決這個問題。
</p>