2

我正在使用提供所见即所得功能的 Web 工具平台在 Eclipse 中工作。现在我遇到了问题，两个容器没有显示在同一行中。真正奇怪的是，当我将文件导出到桌面并用浏览器打开时，两个容器排成一行，但没有边距。为什么会有两种不同的外观？我的意思是，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>

...和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;}

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

4

2 回答 2

1

尝试为#contCont 添加一些边距，这也有助于创建一个用于反复试验的jsfiddle，通常所见即所得不是开发的最佳想法。您还应该将边距添加到容器的整体宽度中，因此如果导航的宽度为 200px，每边边距为 20px，并且内容 div 为 1000px，则容器的宽度应为 1240px

于 2012-06-01T17:43:10.730 回答
1

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

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

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

于 2012-06-01T17:45:54.053 回答