Question

我正在使用Web Tools Platform进行eclipse工作，它提供了WYIWYG功能。现在我遇到了问题，两个容器没有显示在同一行。真正奇怪的是，当我将文件导出到桌面并使用我的浏览器打开它时，de两个容器显示在行中，但没有边距。为什么有两种不同的外观？我的意思是，eclipse插件可能无法正常工作，但最迟当我在浏览器中打开文件时，它应该显示我的代码与否？

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

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文件：

@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;}

注意：我已经在“navigation”和“contCont”中使用float:left对其进行了测试，但没有变化。

Answer 1

尝试为#contCont添加一些边距，它也有助于创建一个jsfiddle用于试验和错误目的，通常wysiwyg不是最好的开发理念。你还应该将你的边距添加到容器的整体宽度，这样如果你的导航宽度为200px，每边边距为20px，内容div为1000px，那么你的容器应该是1240px宽

Answer 2

IDE提供的WYSIWYG通常不太可靠。

无论哪种方式，试试这个：

#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;
}

我注意到另一件事，你的边距，你没有指定任何单位？将其固定在顶部的原始代码上。这就是为什么边距不会在真实的浏览器中显示。

同样如前所述，您的容器太小，因为您没有占用边距。

eclipse网页编辑器：div不符合

2 个答案: