Fatal编程技术网
  • css/
  • Css eclipse网页编辑器：div'；这不符合规定

Css eclipse网页编辑器：div'；这不符合规定

css html

Css eclipse网页编辑器：div'；这不符合规定,css,html,alignment,Css,Html,Alignment,我正在使用Web工具平台在eclipse中工作，它提供了WYIWYG特性。现在我遇到了一个问题，两个容器没有显示在同一行中。真正奇怪的是，当我将文件导出到桌面并用浏览器打开它时，两个容器排成一行，但没有边距。为什么有两种不同的外观？我的意思是，eclipse插件可能无法正常工作，但最晚当我在浏览器中打开文件时，它应该会显示我编写的代码还是没有 以下是我想解释的两张图片： 以下是html文件： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Tr

我正在使用Web工具平台在eclipse中工作，它提供了WYIWYG特性。现在我遇到了一个问题，两个容器没有显示在同一行中。真正奇怪的是，当我将文件导出到桌面并用浏览器打开它时，两个容器排成一行，但没有边距。为什么有两种不同的外观？我的意思是，eclipse插件可能无法正常工作，但最晚当我在浏览器中打开文件时，它应该会显示我编写的代码还是没有

以下是我想解释的两张图片：

以下是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>
注意：我已经在“导航”和“contCont”中用
float:left
对它进行了测试，但没有任何变化。

尝试在#contCont中添加一些边距，这也有助于创建一个JSFIDLE用于尝试和错误，通常所见即所得不是最好的开发方法。
您还应该将您的边距添加到容器的总宽度中，因此如果您的nav每边的边距为200px和20px，并且内容div为1000px，那么您的容器应该是1240px宽的

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;}
还将导航和contCont包装在另一个div中

另一件需要注意的事情是浏览器有html标记的默认样式。您应该重置它们，例如：

*{
margin: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
font-weight: normal;
font-style: normal;
}
我注意到的另一件事是，对于您的利润率，您没有指定任何单位？修正了顶部的原始代码。这就是为什么边距不会显示在真正的浏览器中

同样如前所述，您的容器太小，因为您没有获取利润

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