您在這裡

Div的長度怎麼樣和td長度保持一致?

tky's 的頭像
tky 在 2007-08-18 (週六) 23:13 發表

各位好:

TKY最近在修改版型的時候一直碰到一個難題:如果排版是用table去做,在某個td(空格)中放入div,div的長度並不會和td的長度保持一致。但是div的內容變多了則會把td撐開。

TKY在td中,把好幾個有background image的div疊在一塊兒,做出想要的邊框。然而,試過幾種CSS的寫法,總是無法讓這些div的長度和td保持一致,以致於當div的內容比較少的時候,整個邊框在顯示上會比td還要短,這樣就「破功」了。

想請教版上的美編,要怎麼要達到TKY要的效果呢?

TKY

應該是TKY沒有講清楚,這次講清楚一點。

以預設的bluemarin版型來說,它的主要內容包含節點是放在#main這個div裡頭,而#main又放在三欄表格的中間td裡頭(左右兩邊的td分別是#sidebar左、右)。

情況有可能是左右欄的區塊放很多,把整個table連三個td都撐得很長,但是div #main的內容卻沒有那麼多,以致於它的背景圖片或顏色只會出現到div的邊界,很容易被看出來短了中間td一截。

其實TKY可以把要放在div #main裡頭的背景圖片指派給td,不過由於TKY想要做的是一個能適應各種長寬變化的背景邊框,所以上下左右的邊框圖片是分別指定的;左邊不同於右邊。然而td只能放一個背景圖片。

這就是難處。

最好的方法就是讓td裡頭的div全都有和td一樣的長度,這樣就搞定了。div長到撐開td無所謂,因為這樣看不出破綻。div太短就漏餡了!

在CSS裡面,div的長度好像都是繼承性的,也就是說如果上一層的div或td沒有指定長度的話,裡頭的div指定長度auto或100%是不會有變化的。問題是,TKY試過,如果指定了各div或td長度的話,#main裡頭的東西就不會因為元素的變化而撐開版面了:這導致的問題就是,如果你打開一個可打開的fieldset,它會把底下的內容「擠出」版面而看不見;因為整個版面的長度已經被指定了,不會隨之變化。

其結果就是在fieldset很多的node編輯畫面中,造成各欄位編輯上的困難。要開開關關的。

總之,如果能給個方法,讓div長度能隨著上一層的td或table的長度而變化,那就能避開這一切一切的問題了。

tky

tky

範例的話,可以看清華哲學所那個站,比如說這個頁面:
http://www.phil.nthu.edu.tw/node/1530

左邊的內容邊框理想中應該要跟右邊的側邊欄一樣長的。

目前在本機上測試的另一個站,想出一個新的作法:在中間的td左右新增兩個td
,分別插入上方圓角圖片,再指定repeat-y的背景圖片,這樣就可以達到理想了。
然而這是修改table的排版而來,不是純粹用css的方式。比較想知道怎麼樣讓div和td去做配合。

tky

tky