CSS Div对齐问题 [英] CSS Div Alignment Problem

问题描述

我有两个组成我的标题的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）; 
宽度：60％; 
 text-align：center; 
 height：150px; 
 display：inline-block; 
 margin-top：0; 
} 
  

我怎样才能让它们融合在一起？

编辑：

我的完整样式表中已经有了reset.css。添加了 vertical-align：top; ，所以现在它只是看起来像这种元素之间的差距。这是约3-4像素和Chrome的检查工具我无法弄清楚它是否是 #title 或 #header 这是造成问题的原因：

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

解决方案

我认为您需要 vertical- align：top 在你的显示：inline-block 元素上。

如果不是这样，请尝试删除HTML标记内部的所有空白符号。

（它是一个已知问题）

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

I have two divs that make up my header, #title and #header. They are inside #totalTop. They should be flush against the top, and they should be flush against each other. Here's how it looks like:

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

Here's the CSS code for the relevant part:

#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;
}

How can I get them to fit together? I already have reset.css in my full stylesheet.

Edit:

Added the vertical-align: top;, so now it only looks like this sort of gap between elements. It's about 3-4px and with Chrome's Inspect Tool I can't figure out whether it is #title or #header that's causing the problem:

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

解决方案

I think you need vertical-align: top on your display: inline-block elements.

That should sort it out.

If it's not that, try removing all whitespace inside your HTML markup around those elements.
(it's a known issue)

I'm not sure because you haven't shown all the relevant code.

这篇关于CSS Div对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！