Блог

Главная - Вопросы по программированию - Выровнять текст и изображение рядом

Выровнять текст и изображение рядом

#html #css

#HTML #css

Вопрос:

Кажется, я не могу разобраться в этой простой проблеме. Я пытаюсь расположить текст рядом с изображением

Мой HTML:

 <article>
    <img src="http://placehold.it/300x150" />
    <h3>Long title should go right here</h3>
</article>

Мой CSS:

 img {
    display: inline-block;
}

h3 {
    display: inline-block;
    line-height: 20px;
}

Это работает, но как только заголовок прерывается и переходит на следующую строку, все теги h3 перемещаются в нижнюю часть страницы. У меня такое чувство, что это неправильный подход к этому. Надеюсь, я смогу получить некоторые ответы.

Комментарии:

1. Кажется, здесь все в порядке jsfiddle.net/j08691/LG9Vm

2. Вы хотите, чтобы заголовок находился над изображением, когда окно сжимается? Вы хотите, чтобы текст был справа от окна? Вы хотите, чтобы оно было выровнено по верху изображения или по низу?

Ответ №1:

Попробуйте это:

Живая демонстрация

CSS

 img {
    float:left;
    margin-right:5px;
}

h3 {
   line-height: 20px;
}

Ответ №2:

Вместо этого используйте float:

 img {
    float: left;
}

Комментарии:

1. Я чувствую себя идиотом. Просто нужно было добавить ширину и высоту к моему изображению, и оно отлично работает. Спасибо.