Cómo insertar dos imágenes horizontalmente con HTML

Embed images using HTML and align them with CSS.
Por sara williams

Paso 1

Añade una etiqueta <img> para cada imagen en el documento HTML. Coloca cada etiqueta <img> en su propia línea, pero aún junto a la otra. Utiliza el atributo "src" para definir la ruta del archivo, la dirección Web a cada imagen, de este modo: *<img src="path/to/image1.png"> <img src = "path/to/image2. png ">


Paso 2

Guarda el archivo HTML y compruébalo en el navegador. Si el sitio ya se encuentra alojado en un servidor Web, recuerda que debes cargar el archivo HTML actualizado, más las dos imágenes. Ambas imágenes se mostrarán pegadas. Esto sucede porque a pesar de que poner cada <img> en su propia línea, no se encuentran dentro de una etiqueta <p> para crear párrafos o no se agregó una etiqueta * para romper las líneas. A veces, tu código CSS hará que no se muestren las imágenes lado a lado. Sin embrago, también necesitarás CSS para dar espacio de las imágenes.


Paso 3

Edita el CSS de tu página Web para asegurarte de que las imágenes siempre se alineen horizontalmente. Agrega el código CSS en un archivo externo .CSS o entre las etiquetas <style>, que van entre las etiquetas de encabezado en la parte superior de tu documento HTML. Aquí está el código de ejemplo: img {float: left; margin-right: 10px; margin-bottom: 10px;} El código anterior "flota" cada instancia de la etiqueta a la izquierda de lo que esté al lado de la página. Cualquier cosa a la derecha de una etiqueta de flota a la izquierda se envuelve alrededor del elemento flotante. Añade el relleno o el espacio a los márgenes de las imágenes.


Paso 4

Rodea <img> con una etiqueta <div> y dale a la etiqueta <div> un atributo ID. El nombre del atributo ID será algo único y significativo. Aquí está un ejemplo: <div id="images"> src="path/to/image1.png" <img /> <img src="path/to/image2.png" /> </ div>


Paso 5

Escribe el siguiente código CSS para mantener tus imágenes "flotando" en otros contenidos: # imágenes {clear: both;} También puedes cambiar el código CSS para flotar sólo imágenes que se encuentren entre las etiquetas <div> con un ID de "imágenes "de esta manera: *# imágenes img {float: left;}