CSS DIV的內容大小的問題

我有這樣CSS DIV的內容大小的問題

<div id="first"> 
    <div id="second"> 
    <div id="third"> 
     <div id="fourth"> 
     text 
     </div> 
     <div id="fourth"> 
     text2 
     </div> 
    </div> 
    Some other stuff... 
    </div> 
</div

這裏的結構是在CSS它的那一刻：

#first { 
width:960; 
} 

#second { 
position:relative; 
} 

#third { 
position:relative; 
top:0; 
right:0; 
} 

#forth { 
position:relative; 
top:0; 
left:0; 
}

現在我想從第四物品留在一排並從第三個項目留在第二個div的右側。第二個div也有第一個寬度960。這有什麼問題？爲什麼它不工作？

來源

2010-10-27 Infinite Possibilities

編輯並應工作（未經測試）：

<div id="first"> 
    <div id="second"> 
    <div id="third"> 
     <div class="fourth"> <!-- changed to class --> 
     text 
     </div> 
     <div class="fourth"> <!-- changed to class --> 
     text2 
     </div> 
    </div> 
    Some other stuff... 
    </div> 
</div> <!-- was missing closing bracket -->

而且款式：

#first { 
width:960px; /* was missing px */ 
} 

#second { 
position:relative; 
} 

#third { 
float:right /* Makes the element float on the right side. Might want to clear in a later id/class to avoid quirks */ 
position:relative; 
/* Removed redundant top:0; and right:0; */ 
} 

.fourth { /* Changed to class and fixed spelling */ 
position:relative; 
/* Removed redundant top:0; and right:0; */ 
}

的ID應該用於將只能使用一次的元素。類應該用於可以/將要多次使用的元素。

來源

2010-10-27 16:27:31 Freyr

感謝您的評論。我認爲這將是我需要的。此外，我還要問你關於課程和身份證。 Id在整個HTML頁面或div中使用一次？ – 2010-10-27 17:19:28

您的解決方案很好，但是「第四個」項目低於另一個，它們應該在一行中？請你能幫我解決這個問題嗎？ – 2010-10-27 17:22:46

您必須確保。第四項不能太寬以致不能彼此相鄰。所有你應該做的就是添加顯示：內聯;或float：left;到你的第四課。每個ID只能在整個html文檔中使用一次。默認的定位也是相對的，所以這些相關的語句也是相當冗餘的。 – Freyr 2010-10-28 00:34:51

首先，960不是寬度。沒有單位說明符，它只是一個數字。 960px是一個寬度。

其次，那些其他div 是定位正確，但他們的寬度是100％（默認），所以他們看起來像他們堆疊。因此，定位不明顯。

編輯：你也拼錯了你的CSS選擇器中的「#fourth」。

來源

2010-10-27 16:03:22 Robusto

感謝您的評論。是的，它是。對不起。 :) – 2010-10-27 17:18:46

對於第四個div，爲什麼不使用inline-div？ [不知道它在IE7及以下的作品] ..我認爲第三可以漂浮在右邊。也不應該使用類而不是多個具有相同ID的元素？

#third { float：right; 位置：相對; top：0; right：0; }

#forth { display：inline-block position：relative; top：0; left：0; }

來源

2010-10-27 16:07:56

感謝您的評論。 – 2010-10-27 17:18:27

CSS DIV的內容大小的問題

回答

相關問題