eclipse網頁編輯器：div不在線

我正在eclipse中使用Web Tools Platform，它提供了WYIWYG功能。現在我遇到了這個問題，兩個容器不在同一行顯示。真奇怪的是，當我將文件導出到桌面並使用瀏覽器打開它時，兩個容器顯示爲一行，但沒有邊距。爲什麼有兩種不同的外觀？我的意思是，eclipse插件可能無法正常工作，但最遲在瀏覽器中打開文件時，它應顯示我編碼或不編碼的內容？eclipse網頁編輯器：div不在線

這裏是什麼，我想說明兩個畫面：

enter image description here

下面是HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<link rel="stylesheet" type="text/css" href="mainStyle2.css" /> 
<title>title</title> 
</head> 
<body> 
    <div id="container"> 
     <div id="header"><b>main title</b></div> 

     <div id="navigation" style="float:left"> 
      <b>Navigation</b> <br /><hr /> 
      Welcome<br /> 
      Team<br /> 
      Links<br /> 
      Screenshots<br /> 
     </div> 
     <div id="contCont" style="float:left"> 
      Content 
     </div> 
    </div> 
</body> 
</html>

...和CSS- file：

@CHARSET "ISO-8859-1"; 

#container{   background-color:#00FF59; 
        width:1200px;} 

#header{   background-color:#99FF99; 
        text-align:center; 
        font-family:bookman old style; 
        font-size:50px; 
        margin-top:20; margin-bottom:10; 
        margin-left:20; margin-right:20;} 

#navigation{  background-color:#99FF99; 
        width:200px; height: 800px; 
        font-family:bookman old style; 
        font-size:20; 
        margin-top:10; margin-bottom:10; 
        margin-left:20; margin-right:20;} 

#contCont{   background-color:#99FF99; 
        width:1000px; height: 800px; 
        font-family:bookman old style;}

注意：我已在「導航」和「contCont」中用float:left對其進行了測試，但沒有更改。

來源

2012-06-01 Valentino Ru

所見即所得IDE提供的信息通常不太可信。

不管怎樣，試試這個：

#navigation{  background-color:#99FF99; 
       width:200px; height: 800px; 

       font-family:bookman old style; 
       font-size:20px; 
       margin-top:10px; margin-bottom:10px; float: left; 
       margin-left:20px; margin-right:20px;} 

#contCont{   background-color:#99FF99; 
       width:960px; height: 800px; float:right; 
       font-family:bookman old style;}

而且包裹在另一個DIV導航和contCont。

另一件需要注意的事情是，瀏覽器有html標籤的默認樣式。你應該重置他們，例如：

*{ 
margin: 0; 
padding-left: 0; 
padding-right: 0; 
padding-top: 0; 
padding-bottom: 0; 
font-weight: normal; 
font-style: normal; 
}

另一件事，我注意到你的利潤率，你沒有指定任何單位？修正它在頂部的原始代碼。這就是爲什麼邊緣不會顯示在真實的瀏覽器中。

同樣如前所述，您的容器太小，因爲您沒有佔用餘量。

來源

2012-06-01 17:45:54 Monokh

嘗試向#contCont添加一些邊距，它也有助於創建一個用於試驗和錯誤目的的jsfiddle，通常wysiwyg不是開發的最佳想法。你還應該在容器的整體寬度上加上邊距，所以如果你的導航寬度爲200px，邊距爲20px，內容div爲1000px，你的容器寬度應該是1240px

來源

2012-06-01 17:43:10 Keith

eclipse網頁編輯器：div不在線

回答

相關問題