圖文的排版問題 - 部落格

※ 引述《iCross ()》之銘言：
: 目前想貼一篇下面樣子的文章
: █████ 文字一
: █████ 文字二
: ██圖██ 文字三
: █████
: █████
: █████ 文字一
: █████ 文字二
: ██圖██ 文字三
: █████
: █████
: 雖然用blogger圖片上傳功能傳上去可以讓圖在左邊
: 但是由於文字只有三行
: 會變成下面這樣
: █████ 文字一
: █████ 文字二
: ██圖██ 文字三
: █████
: █████ █████ 文字一
: █████ 文字二
: ██圖██ 文字三
: █████
: █████
: 有沒有什麼比較好用的排版方式可以用呢
: PS.試過表格
: 但是不知道為什麼多一個 <tr> 標籤
: 整個table就和上一段多空一行
: 最後變成表格和上一段的距離超遠...(有人聽的懂我在說什麼嗎)
: 拜託強者幫幫忙吧 感謝

我跟你有一樣的問題，剛剛看到推文中有人提到 clear 這個屬性，
去查了定義試了一下，終於找出方法：

<img src="http://www.some.where/picture01.jpg" style="float:left">
文字一<br>文字二<br>文字三<br>

<img src="http://www.some.where/picture02.jpg" style="float:left; clear:left">
文字一<br>文字二<br>文字三<br>

重點在於第二個 img 內的 "clear:left"
這個屬性的意思是如果左邊有浮動元件的話，此元件便移到該浮動元件下方。

而 "float:left" 則是將所屬元件指定為浮動性質。

大概是這樣，如果有說錯的地方還請不吝指教。

--

http://yuxioz.blogspot.com/


--