MozTW 討論區

各項 Mozilla 相關軟體與技術討論
現在的時間是 2025-06-26, 07:13

所有顯示的時間為 UTC + 8 小時





發表新文章 回覆主題  [ 6 篇文章 ] 
發表人 內容
 文章主題 : CSS clear 屬性
文章發表於 : 2008-08-17, 10:55 
離線
頭像

註冊時間: 2005-02-24, 19:15
文章: 1037
來自: Taiwan
代碼:
<div id="a_container" style="width:65%; float:left">
</div>
<div id="b_container" style="width:30%; float:left">
 <div style="float:right"><img src="..." width="80" height="25"/></div>
 <p>............</p>
 <div style="clear:both">重點</div>
 <p>............</p>
</div>

在 FX 2 時「重點」會讓 float 中止,
但僅侷限於 b_container 內部,
b_container 本身的 float 效果仍在,
在 FX 3 時,「重點」不僅中止 float 效果,
連帶使得 b_container 的 float 出現不同結果,
在「重點」以上完全照著所有 float 設定排版顯示,
而「重點」以下則失去 float 屬性效果;
變成 b_container 被「撐」大,如同往常 IE 對 block 元素的處理,
請問這樣是正確的嗎?
要怎麼作比較適合在一個大的 float 排版區塊中進行一個小區塊的 float 排版處理?

_________________
Amauds's Firefox
曾經妳以為最可靠的依賴;其實從未曾真實的存在過。
圖檔圖檔


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1
 個人資料  
引用回覆  
 文章主題 : property
文章發表於 : 2008-08-17, 15:20 
離線

註冊時間: 2008-08-17, 15:04
文章: 2
謝謝! 最近常常寫web page, 這個篇碼實在太好,太handy了!


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2008-08-17, 15:28 
離線
[網站管理員]

註冊時間: 2005-01-02, 05:49
文章: 3220
不太清楚首篇最後想弄什麼樣子,不過在 div#a_container 的內容裡加個 &nbsp; 試試,Fx3 好像不會搭理沒內容的元素?

_________________
【Firefox 有問題請先看這裡】
回覆文章的建議
萬用自我檢測除錯大法 for Firefox
完全備份大法 for Firefox
重建 Firefox 的設定
乾淨升級 Firefox
(本帳號停用中)


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1
 個人資料  
引用回覆  
 文章主題 : css float and clear
文章發表於 : 2008-08-17, 19:03 
離線

註冊時間: 2005-11-23, 15:12
文章: 291
來自: 呆玩
Amauds 寫:
在 FX 2 時「重點」會讓 float 中止,
但僅侷限於 b_container 內部,
b_container 本身的 float 效果仍在,
在 FX 3 時,「重點」不僅中止 float 效果,
連帶使得 b_container 的 float 出現不同結果,
在「重點」以上完全照著所有 float 設定排版顯示,
而「重點」以下則失去 float 屬性效果;
變成 b_container 被「撐」大,如同往常 IE 對 block 元素的處理,
請問這樣是正確的嗎?


1.floating的元素,box脫離原在的區塊,但不影響「其前後」 block-levle 元素的正常排版(normal flow);而只會「擠開」其後 inline-levle內容及 floating 元素。
2.元素被指定 clear ,由該元素起,不再受「其前」 floating 元素影響,回復成原來應有的排版。

所以,由「重點 div」開始,包括其後的 p,都會回復成正常 block-level 排版方式,而 b_container 也是 floating 元素,依據規則,高度會自動依據「其內容」縮放。我想這些都是標準呈現,從 fx2 就是這樣了,並不是 fx3 才變的。

Amauds 寫:
要怎麼作比較適合在一個大的 float 排版區塊中進行一個小區塊的 float 排版處理?


不懂你想怎麼呈現?因為不知你在「重點 div」clear是什麼目的?

wini 寫:
Fx3 好像不會搭理沒內容的元素?

不會這樣,只要有元素都會認為有,只是 block-levle 像 p 或 div 沒有高度,或 inline-levle 像 span 沒有寬度,看不見而已。

_________________
時間,人為與自然的衝突。~不惑仔


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2008-08-18, 13:01 
離線
頭像

註冊時間: 2005-02-24, 19:15
文章: 1037
來自: Taiwan
「重點 div」的存在是因為 Fx 2 時的排版,
當時只能這麼作, 才能達成小區域 float 要求,
而 fx 3 卻不理會(或正確理會)這樣的元素,
致使版面走樣,
後來刪除掉「重點 div」就恢復了,
這是否意謂者該版面無法向下相容於 fx 2 ?

_________________
Amauds's Firefox
曾經妳以為最可靠的依賴;其實從未曾真實的存在過。
圖檔圖檔


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.0; zh-TW; rv:1.9.0.1) Gecko/2008072015 Minefield/3.0.1 (tete009 SSE PGO)
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2008-08-18, 23:42 
離線

註冊時間: 2005-11-23, 15:12
文章: 291
來自: 呆玩
你所說的問題,在 fx2 我都沒遇過,可能還是沒辦法體會你說的意思 吧。:oops:
不過只要依據 float 的意義去編排, fx 應該不會有問題,反而在 ie 問題比較多。

ps.我很久前就已改用 position 做大排版了, float 版面比較容易因為其內容改變而垮掉。

_________________
時間,人為與自然的衝突。~不惑仔


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1
 個人資料  
引用回覆  
顯示文章 :  排序  
發表新文章 回覆主題  [ 6 篇文章 ] 

所有顯示的時間為 UTC + 8 小時


誰在線上

正在瀏覽這個版面的使用者:沒有註冊會員 和 7 位訪客


不能 在這個版面發表主題
不能 在這個版面回覆主題
不能 在這個版面編輯您的文章
不能 在這個版面刪除您的文章
不能 在這個版面上傳附加檔案

搜尋:
前往 :  
cron
Powered by phpBB® Forum Software © phpBB Group
正體中文語系由 竹貓星球 維護製作
© moztw.org, Mozilla Foundation
MozTW,Mozilla 台灣社群