Изображение вызывает проблемы с вертикальным выравниванием - PullRequest
Новая
       10

Изображение вызывает проблемы с вертикальным выравниванием

0 голосов
/ 17 ноября 2008

У меня есть следующий макет div:

image

Все нормально, когда я помещаю обычные текстовые элементы в синий и оранжевый элементы div. Тем не менее, когда я помещаю изображение в оранжевый div (который составляет 31px), элементы в синем div выталкиваются примерно на половину высоты синего div.

(дополнительная информация, при наведении на html оранжевого div в firebug кажется, что в нем содержится только половина изображения, хотя невооруженным глазом это выглядит нормально)

Буду признателен за любую помощь, я все еще немного ржав на модели коробки. Спасибо.

Ответы [ 3 ]

2 голосов
/ 17 ноября 2008

Попробуйте перевести два целочисленных деления.

поплавок: левый;

2 голосов
/ 17 ноября 2008

Возможно, вы захотите попробовать поместить изображение слева от текста. Таким образом, текст будет располагаться рядом с изображением без необходимости позиционирования. Например: 

<style>
div {
position: absolute;
border: 1px solid blue;
}
div img {
height: 31px;
width: 50px;
float: left;
}
</style>

<div>
    <img src="myImage.gif">
    <p>Lorem ipsum dolor sit amet...</p>
</div>

Настройте компоновку, предоставив контейнеру div некоторый отступ и / или изображение, и вы сможете получить именно тот вид, который вам нужен. Удачи!

0 голосов
/ 17 ноября 2008

Я не очень хорош с блоками CSS, но могу добавить: display: inline; к стилю изображения исправить проблему? И / или добавление маржи: 0px;
Да, и это более рендеринг рендеринга в режиме Quirks, так как не рендеринг в режиме Quirks может также решить некоторые проблемы.

Редактировать
Под режимом причуд я имею в виду, есть ли на вашей странице объявление DOCTYPE, подобное приведенному ниже (хотя вы, конечно, должны использовать корректный DOCTYPE) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

больше о DOCTYPES здесь: http://htmlhelp.com/tools/validator/doctype.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...