Question

我有两个构成标题的div，#title和#header。他们在#totalTop内。它们应该与顶部齐平，并且它们应该相互齐平。这是它的样子：

http://i53.tinypic.com/2ykj0b7.jpgy

以下是相关部分的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。

修改

添加了vertical-align: top;，所以现在看起来只是元素之间的这种差距。它大约是3-4px，使用Chrome的Inspect Tool我无法弄清楚导致问题的是#title还是#header：

http://i55.tinypic.com/j0i4nr.jpg

Answer 1

我认为您的vertical-align: top元素需要display: inline-block。

应该解决这个问题。

如果不是这样，请尝试删除HTML标记中围绕这些元素的所有空格。
（这是一个known issue）

我不确定，因为您没有显示所有相关代码。

Answer 2

显示：内联块使它们的行为就像它们在一行文本中一样。将其粘贴在#title和#header块中：

vertical-align: top;

水平问题很可能是由它们之间的空间引起的;你可以编辑你的HTML，以确保标题div的结尾和标题div的开头之间没有空格，或者你可以摆脱“display：inline-block;”反正你实际上并不是这个意思。为了修复旧的IE浏览器错误，我推荐这个黑客：

#display:inline-block;

（也就是说，在行的开头插入一个“＃”。）

较新的浏览器会忽略它，因为它在技术上无效，但它仍然可以解决旧的IE错误。

Answer 3

只是使用任何边框时未来的参考点，您可以在同一行中使用所有选择，例如

border-bottom: solid #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}

希望我没有发现任何明显的错误，这是我今天的最后一篇文章。

希望这会有所帮助。

CSS Div对齐问题

3 个答案: