Question

以下是我目前骨架设计的链接。

enter image description here 我是新手使用div，我总是使用桌子，但转向div。但无论如何，我的问题是......如何正确调整每个div的内容。我希望导航与主要内容一起居中。

的index.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>

的main.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;
}

Answer 1

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

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

img {vertical-align: bottom;}

一切都会像你期望的那样出现。

Answer 2

您的代码存在一些问题。

你的导航div，内容div和页脚div对齐不正确的原因是你将#logo div设置为400px高度并浮动，但你没有清除浮动。不幸的是，你无法正确清除那个div，因为你的标题高度为100px，小于嵌套在标题内的400px div。

为了教你，我假设你的徽标不应该是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的顶部。（您应该使用正确的重置CSS样式表或使用Normalize CSS Sheet。这些重置样式表有助于标准化不同浏览器中的元素，并且还为您提供了一个空白的平板，可以从中开发，而不必担心发生的奇怪事情就像我们修好的白色空间一样。

Answer 3

这是我的最佳答案：

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 ... Div很棒但你可以用html5简化你的代码

.. ..它简单易学：）

Answer 4

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

你的形象风格完全错误，因此为什么一切都会看错。

您还应该知道您可以使用
保证金：0自动;
而不是
margin-right：auto; margin-left：auto;

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

我的div没有正确对齐

4 个答案: