gpt4 book ai didi

css - eclipse 网页编辑器 : div's not in line

转载 作者:行者123 更新时间:2023-11-28 00:18:14 25 4
gpt4 key购买 nike

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

这里放两张图说明一下:

enter image description here

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 对其进行了测试,但没有任何变化。

最佳答案

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

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

另外如前所述,您的容器太小,因为您没有考虑利润。

关于css - eclipse 网页编辑器 : div's not in line,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10854917/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com