Вопрос

Проблема CSS - промежутки между div

Автор вопроса: Harsha M V15.02.2011Ответов: 5

Я разработал макет и обнаружил некоторые пробелы в расположении элементов div друг над другом.

кто-нибудь может мне помочь http://uniquedl.com/3closets/about.html

введите здесь описание изображения и

введите здесь описание изображения

html layout css

Ответы

Ответ 1 · рейтинг 4 · thirtydot

Вам нужно это в style.css:

img { display: block }

и вам нужно изменить высоту .introduction .intro-message на 384px, чтобы она соответствовала высоте изображения слева.

Это решает обе проблемы.

В качестве альтернативы img { display: block } вы могли бы сделать: img { vertical-align:bottom }. Это также исправляет.

см. этот ответ за хорошее объяснение того, что здесь происходит.

@Alohci очень хорошо это объясняет.

Ответ 2 · рейтинг 1 · Joel Etherton

У вас есть <div class="clear"></div> в обоих случаях. Я бы сказал, что страница ведет себя так, как ожидалось.

Изменить: если вы используете Google Chrome для просмотра этой страницы, вы можете щелкнуть правой кнопкой мыши область и выбрать "проверить элемент". Он предоставит окно, в котором будет отображаться код, отображаемый браузером, а справа будет другое окно свойств, в котором отображается css, назначенный элементам, на которые вы смотрите.

Ответ 3 · рейтинг 1 · Marcus Sá

в их div .introduction у вас есть изображение больше, чем сам div, это должно быть проблемой, включая другие div

Ответ 4 · рейтинг 1 · SteD

Первый пробел: ваш класс .introduction имеет высоту 384px, где еще класс .intro-message (который является дочерним элементом .introduction) имеет высоту 390px.

Ответ 5 · рейтинг 1 · Discover

Привет для вашего веб-сайта: http://uniquedl.com/3closets/about.html просто сделайте стиль как

.introduction {
    height: 384px;
    overflow: hidden;
    position: relative;
}

Тогда это сработает

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.