CSS、Div对齐问题

我有两个div组成我的标题，

#title

和

#header

。它们位于

#totalTop

内。它们应该与顶部齐平，并且应该彼此齐平。下面是它的样子：

以下是相关部分的CSS代码：

#totalTop {
text-align: center;
}
#title {
background-image: url(../img/TopBannerGradientOrange.png);
border-bottom-color: #FFF;
text-align: center;
border-bottom-style: solid;
border-bottom-width: 3px;
background: url(../img/TopBannerGradientOrange.png);
height: 150px;
width: 20%;
font-size: 25px;
display: inline-block;
}
#header {
border-bottom-color: #FFF;
border-bottom-style: solid;
border-bottom-width: 3px;
background: repeat-x;
background: url(../img/TopBannerGradientOrange.png);
width: 60%;
text-align: center;
height: 150px;
display: inline-block;
margin-top: 0;
}

我怎样才能把它们装配在一起？我的完整样式表中已经有reset.css

编辑：

添加了

垂直对齐：顶部，所以现在看起来只是元素之间的这种间隙。它大约是3-4px，使用Chrome的检查工具，我无法确定是
#title
还是
#header
导致了问题：


我认为您需要在
显示：内联块
元素上使用
垂直对齐：顶部

那应该会解决的

如果不是这样，请尝试删除HTML标记中围绕这些元素的所有空白。

（这是一本书）

我不确定，因为您没有显示所有相关代码。
只是将来使用任何边框时的参考点。例如，您可以在同一行中使用所有选择

边框底部：实心#fff 3px

这将减少你的CSS

您的问题：

我将使用以下命令并相应地调整div

#tilte { position: relative; top: 0; wdith:[width of image];}

你也可以使用绝对存在，但当div在另一个亲戚的体内时，就可以了

#header { position:relative; top:0 width:[width of image];}

如果#totaltop仅包含这两个元素，则使宽度等于#totaltop的总宽度减去边框填充边距等。。这应该会让他们排成一行

#totaltop div {float:left}

希望我没有犯任何明显的错误，时间已经晚了，这是我今天的最后一篇文章

希望这有帮助
 display:inline块导致它们的行为就像在一行文本中一样。在标题栏和标题栏中添加以下内容：

vertical-align: top;

水平问题很可能是由它们之间的空间引起的；您可以编辑HTML以确保title div的结尾和header div的开头之间没有空格，或者您可以去掉实际上并不意味着的“display:inline block”。为了修复旧的IE浏览器漏洞，我建议使用以下方法：

#display:inline-block;

（即，在行的开头插入一个“#”）

较新的浏览器会忽略这一点，因为它在技术上是无效的，但它仍然可以解决旧的IE bug。
也许你想让它看起来像什么？@rcravens：感谢你花时间这么做，现在很明显，这两个问题都是我在回答中提到的，请参阅：（删除空白）使用
display:inline block
标记中的空白会让你做噩梦。如果你特别画了草图，你可以应用浮动；实际上这是必要的，所以删除空白是一个好办法。。。或者将#wrapperDiv本身居中，或者将css放入wrapperDiv中，使其中的所有文本收缩为零。