Как убрать разрыв между div в html?
Я застрял с этой проблемой и не могу выйти из этого. Пожалуйста, помогите мне.
На моей веб-странице я использовал 3 div внутри контейнера div. Я пытаюсь удалить нежелательный пробел между div.
- (1) Top BG изображение
- (2) среднее изображение bg
- (3) нижнее изображение
Я пытаюсь настроить эти 3 деления так, чтобы они могли выглядеть как одно изображение BG. Моя средняя часть и нижняя часть полностью отрегулированы, но между верхней и средней частью есть промежуток, который я пытаюсь удалить, но не могу.
Пожалуйста, обратитесь к изображению, которое я прикрепил здесь, которое показывает зазор между верхней и средней частью. Пожалуйста, обратитесь к данным таблицы стилей, которые я использовал для размещения изображений.
Заранее спасибо.
#main_container {
background-repeat:no-repeat;
width:645px;
float:left;
padding-bottom:10px;
overflow:hidden;
height:auto;
}
#middle_part {
background-image: url('/DiscoverCenter/images/apps_mid.png');
background-repeat:repeat-y;
width:645px;
padding-bottom:10px;
overflow:hidden;
height:auto;
clear:both;
position:relative;
display: block;
vertical-align: bottom;
}
#top_part {
background-image:url('/DiscoverCenter/images/apps_top.png');
width:645px;
top:0px;
height:47px; /* actual height of the top bg image */
clear:both;
position:relative;
display: block;
vertical-align: bottom;
}
#bottom_part {
background-image:url('/DiscoverCenter/images/apps_btm.png');
width:645px;
height:24px; /* actual height of the bottom bg image */
}
8 ответов
Это была проблема с размером изображения Top bg. Размер изображения составляет 45 пикселей, и я принял размер div как 47 пикселей. Уменьшение размера div решило мою проблему. Большое спасибо Dawson и DBz за помощь.
Рассматривали ли вы использование сброса?
* {
padding: 0px;
margin: 0px
}
Добавьте это к вершине
Тем не менее, пока мы находимся на предмете: вы используете изображения, чтобы получить закругленные углы? Вы можете использовать CSS, чтобы получить закругленные углы в наши дни!
Вот сайт, который может помочь с этим:
Некоторые настройки исправят это:
#main_container, #top_part, #middle_part, #bottom_part { margin:0; padding:0; width:645px; }
#main_container {
float:left;
} /* setting height:auto and overflow:hidden won't do anything */
#top_part {
background:url('/DiscoverCenter/images/apps_top.png') no-repeat;
clear:both;
height:47px;
}
#middle_part {
background:url('/DiscoverCenter/images/apps_mid.png') repeat-y;
display: block; /* only needed if you're assigning this id to an inline element */
min-height: ?? /* assure this element can expand, but never collapses completely */
vertical-align: bottom;
}
#bottom_part {
background:url('/DiscoverCenter/images/apps_btm.png');
height:24px;
}
top_part, middle_part, bottom_part могут иметь поля или отступы, если это не "сторона", которая касается другого (т. е. нижняя часть #top и верхняя часть #middle должны касаться и не двигаться)
Начните здесь, и посмотрите, какие корректировки презентации необходимо внести. Я убрал позиционирование сверху, снизу и сверху, потому что это не имеет отношения к желаемому эффекту. Возможно, вам придется добавить их для абсолютно позиционирования элементов внутри них, но это еще один пост.
Я столкнулся с той же проблемой, и единственный способ исправить это - использовать InspectElement в браузере и постоянно изменять маржу до некоторого значения -ve.
Возможно, вы захотите установить отступ в 0, а не в 10px, и явно указать высоту div, а не использовать auto.
Или, в качестве альтернативы, создайте div-оболочку, которая вмещает все фоновое изображение, чтобы вам не приходилось беспокоиться о том, что они не будут выравниваться в некоторых браузерах...
Это сработало, когда у меня было три (верхний, средний, нижний) фоны, и у каждого был тег div
margin:-8px;