Отображение элемента HTML в горизонтальной линии

У меня есть два HTML-элемента внутри div. Я хочу показать их в строке или горизонтальной линии. Скажем, у меня есть два изображения с кодом, показанным ниже. Как бы я сделал это, чтобы после первого элемента не было разрыва строки, поэтому они будут отображаться один за другим по горизонтали. Прямо сейчас второе изображение отображается ниже первого. Я хочу, чтобы второе изображение отображалось справа от первого. Я уверен, что это можно сделать в CSS. Пожалуйста, помогите.

<img src="image one.jpg">
<img src="image two.jpg">

Ответ 1

Вариант 1

img {
 display:inline;
}

Вариант 2

img {
 display:block;
 float:left;
}

Обновлено, чтобы отражать текущие возможности браузера

Вариант 3

img {
 display:inline-block;
}

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

Ответ 2

Хакер должен установить position: relative; в родительский div и

position: absolute; 
top: 0px; 
left: {left image computed width}px;

на втором. В другом случае вы просто увеличиваете размер div.

Ответ 3

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

Ответ 4

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