Проблема выравнивания CSS Div

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 в моей полной таблице стилей.

Edit:

Добавлен vertical-align: top;, так что теперь это выглядит как разрыв такого рода между элементами. Это примерно 3-4 пикселя, и с помощью Chrome Inspect Tool я не могу понять, является ли это #title или #header, вызывающее проблему:

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

Answer 1

Я думаю, вам нужно vertical-align: top для ваших display: inline-block элементов.

Это должно разобраться.

Если это не так, попробуйте удалить все пробелы внутри вашей HTML-разметки вокруг этих элементов.
(это известная проблема )

Я не уверен, потому что вы не показали весь соответствующий код.

Answer 2

display: inline-block заставляет их вести себя так, как будто они находятся в строке текста.Вставьте это в свои блоки #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}

Надеюсь, я не сделал каких-либо явных ошибок, это поздно, и это мой последний пост сегодня.

Надеюсь, это поможет.