2009-09-17 102 views
0

我建立的網頁佈局,其中包括5像素寬DIV我作爲間隔使用,如果我定義這樣的問題與CSS和DIV高度

div#main_spc { 
    display: block; 
    width: 5px; 
    background: url(../Images/contsep.gif) repeat-y top center; 
    float: left; 
    position: relative; 
} 

,並把高度內嵌我的風格

<div id="main_spc" style="height: 356px;"></div> 

一切正常,因爲它應該,但是當我改變我的代碼從外部CSS文件應用的高度

div.main_spc{ 
    display: block; 
    width: 5px; 
    background: url(../Images/contsep.gif) repeat-y top center; 
    float: left; 
    position: relative; 
} 

div.main_spc.abc{ 
    height: 356px; 
} 

和改變XHTM這樣

<div class="main_spc abc"></div> 

對不起TYPO L碼,當然它始終是類,而不是風格,我寫着急這個問題,我錯過了。如果是這樣的話,那麼螢火蟲就會出現問題,將CSS定義放在第一位!

DIV是隱形的,至少我在裏面放了一些內容,然後DIV是文字高度高。

我試圖檢查從螢火這個元素,而源是確定的,是由火狐(也可能是其他瀏覽器)和螢火顯示省略此CSS元素

div.main_spc.abc { 
} 

我不知道如何改變我的CSS HEIGHT爲了不讓高度脫離風格定義?

+0

請檢查編輯我的答案。 – rahul 2009-09-17 11:32:59

回答

3

使用屬性

更換

<div style="main_spc abc"></div> 

<div class="main_spc abc"></div> 

您已經定義了兩個類main_spc和美國廣播公司和您的使用 '類' 屬性的類'而不是風格。樣式用於內嵌樣式等

style='height: 356px;' 

編輯

這並不是說螢火射出的高度屬性的情況下。如果您檢查右側的樣式部分,您可以看到與元素關聯的類,並且您可以在'abc'類中看到height屬性。

如果您將溢出屬性設置爲隱藏,則內容不會溢出。在你的情況,我認爲你正在嘗試實現高度356px和寬度5px的間隔。然後給

&nbsp; 

裏面的div和看到的結果。

修改你的代碼的空白間隔

div.main_spc 
{ 
       display: block; 
       width: 5px; 
       background: url(../Images/contsep.gif) repeat-y top center; 
       float: left; 
       position: relative; 
} 

.abc 
{ 
     height: 356px; 
} 

<div class="main_spc abc">&nbsp;</div> 
+0

對於錯字感到抱歉,當然它一直是CLASS而不是STYLE,我在急着提出問題並且我錯過了 – MoreThanChaos 2009-09-17 11:21:25

+0

請檢查我的答案的編輯。 – rahul 2009-09-17 11:28:50

0

你似乎已經切換是一個ID選擇器(#)和類選擇(。)在這種情況下,你需要改變無論是CSS定義或

<div class="main_spc"></div> 
+0

對TYPO感到抱歉,因爲它一直是CLASS而不是STYLE,所以我很快就寫了我的問題,我錯過了 – MoreThanChaos 2009-09-17 11:28:00

1

你讓ABC爲main_spc的孩子,沒有兄弟姐妹。所以,你的CSS

div.main_spc{ 
     display: block; 
     width: 5px; 
     background: url(../Images/contsep.gif) repeat-y top center; 
     float: left; 
     position: relative; 
} 

div.main_spc.abc{ 
     height: 356px; 
} 

實際上是在尋找像XHTML

<div class="main_spc"><div class="abc"></div></div> 

更改CSS來

div.main_spc{ 
     display: block; 
     width: 5px; 
     background: url(../Images/contsep.gif) repeat-y top center; 
     float: left; 
     position: relative; 
} 

div.abc{ 
     height: 356px; 
} 

然後

<div class="main_spc abc"></div> 

會工作。