徵求CSS有關文繞圖的語法

0 ⤊

徵求CSS有關文繞圖的語法

請問Xuite日誌若使用CSS語法
要如何做成文繞圖的效果？
以下是我上下排好兩張圖的語法--

我想排成第一排圖在左、文字在右
換行後第二排則是圖在右、文字在左
平行的圖文間要有些間距...
我試過用Xuite裏各家高手的說明去做
但會發生無法換行(即圖層文字交錯重疊)的效果
請會的人直接用上面的語法幫我改寫^^
看Align 或Float 哪個簡單就用哪個
最好能把改寫的地方用不同顏色字體標示出來(如果可以的話)
我想直接套用就好....
還有另一個問題
如果要做成如上的排版
進入排版頁面後
貼圖、撰寫文字、改寫CSS碼等三個步驟的次序為何？
我想找個制式的方式排版
這樣寫Blog就比較不頭大了^^"
謝謝回答喲~~能寫出完整語法的贈20點

2007-06-05 22:56:39 · 1 個解答 · 發問者 ? 1 in 電腦與網際網路 ➔ 程式設計

嗨~~謝謝你^^
1.
我是想做成如下的排版內容：
http://blog.xuite.net/yeegiah/diary/4259952
也就是文字第一排能跟圖片頂端平行(可能文字我會寫多些)
我貼了你的語法
文字是跟圖片底線平行...
不知道要如何修正？
還有~~
文章部分要怎麼和CSS結合呢？
2.我是在Xuite提供的版面直接編輯，你的意思是貼一張圖、寫一段文字，然後 repeat....最後再切換html改CSS碼囉？

我對語法沒啥知識，所以還是迷糊中^^"

2007-06-06 07:04:13 · update #1

我測試第一種方法結果成功了；第二種方法我想是我把html跟CSS搞混了...因為Xuite編輯文章版面是html與原始檔可切換的那種，改CSS的地方他們另外放，是用來編輯整個Blog版面用的...這個比較難；第三種方法我也試了，結果文字仍與圖底平行...加的html代碼擺文章原始碼的前後都一樣。Anyway，真是太謝謝你了，最後我有個問題---如果我的圖檔長寬再加大些，你給我的原始檔語法有沒有地方需要改？譬如
數量增加之類的....？解決了我就可以結案囉 ^^y

2007-06-06 23:19:42 · update #2

1 個解答

1.

文章部分：

測試測試測試

CSS 部分：

img#img1 {float:left;}
img#img2 {float:right;}

多打
的原因是因為圖有圖高 (height) 的關係，你的文章如果沒有填滿要貼下個圖會出問題。

2. 撰寫文字→貼圖→改寫 CSS。老實說，你可以考慮貼圖先撰寫文字後，我個人是常常用 Dreamweaver，寫完貼上，沒什麼大差別。

2007-06-06 16:52:13 補充：
上面代碼如果使用 CSS 就會達到你的要求，不過我沒有 Xuite 帳號，不曉得他們怎麼管的。本來貼 CSS 是讓你知道個大概，看樣子得三種方法全貼：

2007-06-06 16:53:26 補充：
第一種：直接打 inline style ，把下面代碼直接貼入：

CSS 部分不用管。

2007-06-06 16:57:48 補充：
呃，奇摩知識吃掉代碼了。在第一個 img 後面的 border="0" 後放這樣：

...border="0" style="float:left;" /> ...

同理在第二個 img 後面的 border="0" 後：

...border="0" style="float:right;" /> ...

2007-06-06 17:01:14 補充：
第二種：把上面文章部分代碼貼入，然後去你 Xuite 編輯 css 樣式表的地方，把

img#img1 {float:left;}
img#img2 {float:right;}

加在樣式表尾巴。Xuite 只有限定 hinet.net 帳號才能申請，我沒有辦法精確的跟你說明白點哪點哪可以到編輯CSS樣式表的地方。

2007-06-06 17:03:56 補充：
第三種：在上面文章部分前或者文章後，貼入這一段 html 代碼：

直接檢視原始碼貼入，別貼任何進階編輯器。

2007-06-06 17:05:02 補充：
我個人認為第二種最可能成功，因為完全符合這些 blog 站台的政策。

2007-06-07 07:46:07 補充：
寬 (width) 就保持原狀，甚至
數量還可能會減少。

長 / 高 (height) 越多
數量越多。

當然還要看你的內容。

2007-06-06 03:10:18 · answer #1 · answered by mh 7 · 0⤊ 0⤋