0

这是我目前拥有的骨架设计的链接。

在此处输入图像描述 我是使用 div 的新手，我一直使用 table，但正在使用 div。但无论如何，我的问题是......如何正确对齐每个 div 的内容。我希望导航与主要内容一起居中。

索引.html

<!DOCTYPE html>
<html lang="en-US">
<head>

<title>Chomas Tool</title>

<meta charset="windows-1252">
<meta name="Keywords" content="chomas,tool,pinconning,michigan,machine,shop" />
<meta name="Description" content="Chomas Tools- description" />
<!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->

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

</head>
<body>

<div id="wrapper">

<div id="header">
<div id="logo">
<img src="images/logo.gif" width="270" height="100" alt="Chomas Tool"></div>
</div><!-- Close header-->

<div id="navbox">Home | About | Projects | Contact</div>

<div id="content">TEST</div>

<div id="footer">Copyright &copy; Chomas Tool</div>


</div><!--Close_wrapper-->

</body>

主.css

body {
background-color:#b0c4de;
}
p {
background-color:#e0ffff;
}
#wrapper {
height: 100%;
width: 900px;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
}
#header {
background-color:grey;
height: 100px;
width: 100%;
}
#logo {
height: 400px;
width: 300px;
float: left;
}
#search {
width: 350px;
height: 400px;
float: right;
}
#search table {
border: 0px solid #000;
padding: 0px;
}
#navbox {
background-color:darkgrey;
width: 100%;
height: 20px;
text-align:center
}
#content {
background-color:lightgrey;
width: 100%;
height: 150px;
}
#footer {
background-color:grey;
width: 100%;
height: 20px;
}
4

4 回答 4

2

您使用该布局得到奇怪结果的原因是您的#logo div 设置为 400px 的高度。那就是把其他一切都推到右边。

如果您删除divheight: 400px上的#logo，然后将其添加到您的样式中：

img {vertical-align: bottom;}

一切都会如您所愿。

于 2013-05-31T13:30:30.560 回答
0

您的代码存在一些问题。

您的 Nav div、Content div 和 Footer div 对齐不正确的原因是您将#logodiv 设置为 400px 高度并浮动，但您没有清除浮动。不幸的是，您无法正确清除该 div，因为标题的高度为 100px，小于嵌套在标题内的 400px div。

为了教你，我假设你的 logo 不应该是 400px 高，所以我将它设置为等于 100px 的标题高度。

#logo {
height: 100px;
width: 300px;
float: left;
}

虽然我们在讨论高度的概念，但在标题上设置固定高度是可以接受的，因为它是一个不应该超高或不允许更改的 div（一般来说有例外）。就是说...您的内容 div 确实不应该有高度，我可以看到您在这里这样做是为了模拟您有更多内容，而不是让我们在那里添加一些内容。

所以现在我们在这里：http: //jsfiddle.net/dkCZ6/

正如您所看到的，导航很好地居中，您的内容与页脚一样位于应有的位置。

让我们将页脚居中以使其看起来更漂亮...我添加了text-align: center;

http://jsfiddle.net/dkCZ6/1/

#footer {
background-color:grey;
width: 100%;
height: 20px;
    text-align: center;
}

注意到导航和内容区域之间创建的空白区域了吗？那是在内容周围添加段落。让我们通过添加 * { margin: 0; 来重置所有的填充和边距。填充：0；} 到我们 CSS 的顶部。（您应该使用适当的 Reset CSS Stylesheet 或使用Normalize CSS Sheet。这些重置样式表有助于标准化不同浏览器中的元素，并且还为您提供了开发的空白，而不必担心会发生奇怪的事情，例如我们修复的那个空白区域。

于 2013-05-31T13:35:37.270 回答
0

这是我最好的答案：

text-align: center

但是基于您拥有的代码，我已经完成了：

**margin: 0 auto**

http://jsfiddle.net/Riskbreaker/WASEH/5/

只是为了告诉你我只在导航上这样做：

添加：

 <div class="inner">Home | About | Projects | Contact</div>

在 CSS 上：

.inner {margin: 0 auto; width: 50%;}

当您想要多次调用相同的代码以最小化代码时，类总是很好用。养成上课的习惯。

最后我建议学习 HTML5...Divs 很棒，但您可以使用 html5 简化代码

.. ..它简单易学:)

于 2013-05-31T13:36:45.287 回答
0

关闭标题后添加 <div style="clear:both;"></div>

你的图像风格都是错误的，因此为什么一切都会出现在错误的位置。

您还应该知道您可以使用
margin: 0 auto;
而不是
margin-right: auto; 左边距：自动；

考虑使用列表元素进行导航，而不仅仅是静态文本。

于 2013-05-31T13:58:39.040 回答