爲什麼這個div不會繼承正確的寬度樣式

我的.left div在CSS中的寬度設置爲260px，但由於某種原因，它的計算樣式是在980px（包裝的整個寬度）出來的，因此推動在頁面上另一個fiv（div權利）。網站是here，我正在談論的部分是「我是誰？」中的左側h2和右側段落文本。部分。爲什麼這個div不會繼承正確的寬度樣式

HTML

<div id="topwrapper"> 
     <div class="left"> 
     <h2>I create films <span class="green">//</span></h2> 
     <h2>I dance <span class="green">//</span></h2> 
     <h2>I do silly things <span class="green">//</span></h2> 
     <h2>I explore <span class="green">//</span></h2> 
     </div> 
     <div class="right"> 
     <p>lorem ipsum (changed as text is wordy)</p> 
     <p>lorem ipsum (changed as text is wordy)</p> 
     <p>lorem ipsum (changed as text is wordy)</p> 

     </div> 
    </div>

CSS

.left { 
width:250px; 
float:left; 
text-align:right; 
padding-right:50px; 
} 

.right { 
    float:right; 
    width:680px; 
}

來源

2012-09-01 Francesca

您確定包含該CSS嗎？我沒看到它。是的，該CSS絕對不會被加載。 –

@StephenSarcsamKamenar是對的;該CSS不在該網站上。添加它使其工作。 – irrelephant

@irrelephant我發佈了一個答案，以便您可以將其標記爲正確。 –

它可能有一些做的不好的標記。 //不是你如何評論html。在HTML註釋是這樣的：

<!-- </span></h2> -->

當你有不良標記的瀏覽器不好笑的事情來匹配不匹配的元素，如被「註釋掉」那些span元素。

只是我最初的想法。我會繼續尋找。

我使用javascript編輯器http://w3schools.com，它爲我工作。我喜歡在該網站上編輯我的代碼。這是我使用的代碼。

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.left { 
width:250px; 
float:left; 
text-align:right; 
padding-right:40px; 
border:1px solid blue; 
} 

.right { 
    float:right; 
    width:250px; 
border:1px solid green; 
} 

</style> 

</head> 
<body> 

<div id="topwrapper"> 
     <div class="left"> 
     <h2>I create films <span class="green"></h2> 
     <h2>I dance <span class="green"></h2> 
     <h2>I do silly things <span class="green"></h2> 
     <h2>I explore <span class="green"></h2> 
     </div> 
     <div class="right"> 
     <p>lorem ipsum (changed as text is wordy)</p> 
     <p>lorem ipsum (changed as text is wordy)</p> 
     <p>lorem ipsum (changed as text is wordy)</p> 

     </div> 
    </div> 
    </div> 

</body> 
</html>

來源

2012-09-01 00:10:24 ajon

上訪問它。我不評論標記。那些是斜槓。 – Francesca

我不認爲她試圖評論她的內容將在前端看起來像這樣：我創建電影//我假設包裹「//」的跨度用於顏色或某種形式 – Filth

Got它。好。我仍然會在w3schools.com上試用它 – ajon

我看不到「包裝」的結束div？這可能是你的問題給出它的分解HTML

嘗試在你的#topwrapper。左使用此{您在這裏的造型}

我不認爲你的CSS是正裝呢？檢查頭部內的鏈接

來源

2012-09-01 00:10:54 Filth

你是指我的網站中的包裝，或者是我在這裏提供的代碼中的頂層包裝？兩者都關閉。 – Francesca

#topwrapper - 似乎你也錯過了你的CSS呢？ – Filth

鏈接在那裏，當我導航到該文件時，該文件似乎很好。不知道爲什麼它沒有加載。 – Francesca

您確定包含該CSS嗎？我沒看到它。是的，該CSS絕對不會被加載。

來源

2012-09-01 00:13:31

我現在雙重檢查，確實很混亂，因爲它正確地在頭文件中，並且文件（content.css）中的很多CSS似乎正在工作。感謝您的建議，我會繼續狩獵，看看爲什麼它不起作用！ – Francesca

這很奇怪......我不知道o_o –

@Francesca在'.left'塊上面有一個額外的'}'。 – irrelephant

爲什麼這個div不會繼承正確的寬度樣式

回答

相關問題