Visualización del elemento HTML en la línea horizontal

Question

Tengo dos elementos HTML dentro de un div. Quiero mostrarlos en una fila o en una línea horizontal. Digamos que tengo dos imágenes con el código que se muestra a continuación. ¿Cómo podría hacerlo para que no haya un salto de línea después del primer elemento, por lo que se mostrarán uno después del otro horizontalmente. En este momento, la segunda imagen se muestra debajo de la primera. Quiero que la segunda imagen se muestre a la derecha de la primera. Estoy bastante seguro de que esto se puede hacer en CSS. Por favor ayuda.

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

Answer 1

Opción 1

img { 
display:inline; 
} 

Opción 2

img { 
display:block; 
float:left; 
} 

actualizado para reflejar la capacidad actual del navegador,

Opción 3

img { 
display:inline-block; 
} 

Sin embargo, esto sólo funciona si hay suficiente espacio horizontal de las imágenes en cuestión.

Answer 2

Puede hacerlo con CSS (atributo de posición) o con una tabla. No tendrá un salto de línea por defecto a menos que las imágenes sean demasiado anchas para caber en una línea. En ese caso, es un diseño cuestionable obligarlos a estar en la misma línea.

Answer 3

Los elementos de la imagen son elementos en línea, por lo que se muestran horizontalmente, a menos que haya cambiado la regla CSS "mostrar". Creo que no tienes suficiente espacio para que se ajusten horizontalmente.

Answer 4

El truco es fijar position: relative; en la matriz div y

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

en el segundo. De otro modo, simplemente aumenta el tamaño de div.