У меня есть два HTML-элемента внутри div. Я хочу показать их в строке или горизонтальной линии. Скажем, у меня есть два изображения с кодом, показанным ниже. Как бы я сделал это, чтобы после первого элемента не было разрыва строки, поэтому они будут отображаться один за другим по горизонтали. Прямо сейчас второе изображение отображается ниже первого. Я хочу, чтобы второе изображение отображалось справа от первого. Я уверен, что это можно сделать в CSS. Пожалуйста, помогите.
<img src="image one.jpg">
<img src="image two.jpg">
Вариант 1
img {
display:inline;
}
Вариант 2
img {
display:block;
float:left;
}
Обновлено, чтобы отражать текущие возможности браузера
Вариант 3
img {
display:inline-block;
}
Однако это будет работать, только если для рассматриваемых изображений достаточно горизонтального пространства.
Хакер должен установить position: relative; в родительский div и
position: absolute;
top: 0px;
left: {left image computed width}px;
на втором. В другом случае вы просто увеличиваете размер div.
Элементы изображения являются встроенными элементами, поэтому они отображаются горизонтально, если вы не изменили правило отображения CSS. Я думаю, что у вас недостаточно места для их горизонтальной установки.
Вы можете сделать это с помощью CSS (атрибута позиции) или таблицы. У него не будет разрыва строки по умолчанию, если изображения слишком широкие, чтобы соответствовать одной строке. В этом случае сомнительная конструкция вынуждает их находиться в одной строке.