Как удалить нежелательный вертикальный интервал между divs

Я столкнулся с некоторой проблемой, создавая интерфейс для веб-сайта. Я компетентен с CSS, но не фантастический. Во всяком случае, я создал jsFiddle here, который иллюстрирует мою проблему.Как удалить нежелательный вертикальный интервал между divs

На каждой странице моего сайта, в верхней части раздела содержимого, у меня есть изображение баннера. Я хочу разместить два цветовых разделителя, разделяющих этот баннер с контентом. (Как показано в макете, мой дизайнер дал мне: https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg)

Я хотел бы сделать это в чистом CSS + HTML, не просто щелкая изображение. Во всяком случае, я сделал это, используя следующий код:

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg" style="width: 100%;"> 
<div> 
    <div style="width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%; height:10px; display: inline-block; background: #E5C697;"></div> 
</div>

(Пожалуйста, простите встроенный CSS, это только для демонстрационных целей. Кроме того, к сожалению, если я ставлю второй DIV на новой строки и отступы, он создает пробелы)

вопрос Я что существует большой зазор между делителем и изображением. Я попытался добавить margin: 0px и padding: 0px ко всем соответствующим элементам, и пробелы все еще существуют.

Может ли кто-нибудь помочь мне, пожалуйста?

Спасибо, YM

источник

2013-07-21 Joshua Walsh

Используйте метод clearfix, вы можете произвести поиск по этому поводу. –

Для меня это проблема вертикального выравнивания.Вы можете попробовать

.banner { 
    display: block; 
    width: 100%; 
} 
div { 
    height: 10px; 
    vertical-align: top; 
}

Таким образом, вы не должны использовать отрицательные поля (которые не являются неправильными, просто спорной практикой).

Проверьте это here

источник

2013-07-21 06:02:27 Chad

Спасибо, я пробовал вертикально-выровнять: top; раньше, но я не устанавливал баннер для отображения в виде блока. В любом случае, я действительно не хотел привлекать всплывающие окна, поскольку я не чувствовал, что они нужны, и я избегал отрицательных полей, потому что я беспокоился о том, как он будет смотреть на различные разрешения экрана. –

вы можете сделать позицию по отношению и затем установите верхнюю на что-то минус. например:

position: relative; 
top:-10px; 
left:0px;

источник

2013-07-21 04:06:50 Daniel

это на самом деле всплывает проблема

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg"> 
<div style=""> 
    <div style="float:left;width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%;float:left; height:10px; display: inline-block; background: #E5C697;"></div> 
</div>

CSS

.banner { 
    width:100%; 
float:left; 
}

http://jsfiddle.net/eLbUU/4/

источник

2013-07-21 04:07:15 Hushme

Прежде всего, поставить темный коричневый цвет в светлых коричневых делах. Таким образом, когда окно изменено, вы не ставите под угрозу размер и/или интервал между размерами.

<div style="width:100%; height:10px; display: inline-block; background: #E5C697;"> <div style="width:30%; height: 10px; background: #6C210C;"></div></div>

И с пространством вы можете использовать отрицательные поля или поплавки, как это упоминали другие.

.banner { 
    width:100%; 
    /* margin-bottom to the banner is negative which moves the div upward */ 
    margin-bottom: -10px; 
}

fiddle here

источник

2013-07-21 04:11:19 kmkmkm

Ввод дисплей: блок; для класса изображения и float: left; для всех остальных элементов.

.banner { 
    width:100%; 
    display:block; 
    float:left; 
}

http://jsfiddle.net/bjliu/eLbUU/7/ (Edit: К сожалению Wrong Link)

источник

2013-07-21 04:20:33 bjliu

с помощью блока индикации и плавучие дивы, а также убедившись, что сам IMG является индикаторный блок с переливом скрытом я был в состоянии подтянуть полосы в IMG : fiddle

.banner { 
    width:100%; 
    display: block; 
    overflow: hidden; 
} 
div div{ 
    float: left; 
}

источник

2013-07-21 05:23:35

Как удалить нежелательный вертикальный интервал между divs

ответ

Смежные вопросы