0

我是 CSS 的新手，所以如果这是一个愚蠢的问题，请原谅我。

我创建了一个页脚，其中包含 3 个嵌入的 div，其宽度为 33.33%。出于某种原因，我放入每个 div 的文本一半在 div 底部，一半在 div 底部。这让我发疯。有人可以解释为什么会这样吗？

这是我的 XHTML：

<! DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 strict//EN" "http://www.3org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="EN" dir="ltr" xmlns="http://www.w3org/1999/xhtml">

<head>

 <meta http-equiv="content-type"
 content="text/xml; charset=utf-8" />

<title>www.BLeeOBS.com</title>

<link rel = "stylesheet"
 type = "text/css"
 href = "twoCol.css" />

</head>

<body background="images/brick.jpg">

<div id="body">

<div id="head">
 <h1>B. Lee Oil Burner Service</h1>
</div>

<div id="head_right">
 <h1></h1>
</div>

<div id="left">
 <h2></h2>
</div>

<div id="right">
 <h2></h2>
</div>

<div id="footer">

  <div id="footer1">
  <h3>Fully Insured</h3>
  </div>

  <div id="footer2">
  <h3>HIC# PA088378</h3>
  </div>

  <div id="footer3">
  <h3>©2013</h3>
  </div>

</div>

</div>

</body>

</html>

这是我的CSS：

#body {
 margin-left: auto;
 margin-right: auto;
 background-image: url("images/bggradient.jpg");
 text-align: center;
 background-repeat: repeat-x;
 width: 768px;
 height: 1024px;
}
#head {
 background-image: url("images/horizontalpipe.png");
 background-repeat: repeat-x;
 float: left;
 height: 90px;
 width: 678px;
}
 #head_right {
 background-image: url("images/elbow.png");
 float: left;
 width: 90px;
 height:90px;
}
#left {
 float: left;
 height: 904px;
 width: 678px;
}
#right {
 background-image: url("images/verticalpipe.png");
 background-repeat: repeat-y;
 float: left;
 width: 90px;
 height: 904px;
}
#footer {
 background-color: gray;
 color: white;
 height: 30px;
 width: 768px;
 clear: both;
}
#footer1 {
 height: 30px;
 float: left;
 width: 33.33%;
}
#footer2 {
 height: 20px;
 float: left;
 width: 33.33%;
}
#footer3 {
height: 20px;
width: 33.33%;
float: left;
}

我的页面可以在这里查看，看看发生了什么：http: //www.bleeobs.com/bricksswf.html

白色文本应完全位于灰色框（我的 div）中，但如您所见，它位于中间。

另外，我想在标题中将“B. Lee Oil Burner Service”文本稍微高一点。设置填充似乎根本没有帮助。

任何帮助将不胜感激。

4

1 回答 1

0

我不确定为什么，但我在这里看到的“用户代理样式表”正在设置边距：

检查员

立即修复正在设置

h3 { margin: 0 }

或者你想要的。根据这个覆盖我的网站样式的 Chrome 用户代理样式表，您可能想要查看正确的修复程序。它可能在您的文档顶部有所需的内容（可能是 html 5），或者它可能在某处损坏了 css。

编辑：看起来 Adrift 关于需要重置的默认浏览器样式可能是正确的。您可以像他建议的那样使用 reset.css。

于 2013-03-18T03:20:44.060 回答