Entrar

No me alinean las imagenes..porque???

Soprano2 · · Solicitar retirada
Subi una fotos en html 6 fotos, la primeras 2 a la izquierda, cuando coloco las otras 2 a la derecha me sale pero mas abajo de las primeras 2 que subi, y asi son con las ultimas 2 las trato de colocar a la derecha y me salen a la derecha pero ya casi abajo de la pagina.He usado el <div> y sale lo mismo
div align="left"> <img src="C:\Users\Owner\Desktop\fotos after1.png"></div></br><div align="left"><img src="C:\Users\Owner\Desktop\fotoa before 1.png"></div>

En la sgte imagen hice <div align="center"> <img src="imagen etc></div>, me salen al centro pero mas abajo de las primeras que puse a la izquierda...como hago para alineralas que queden left-center y right a la misma altura y seguidas...gracias
skaparate · · Solicitar retirada
Hola:

Tienes que aprender la diferencia entre elementos en línea (inline) y elementos en bloque (block). Los div son elementos de bloque, por lo que insertan un salto de línea al final (</div>), mientras que los elementos en línea no.

Añade esto dentro del head:

#container div { display: inline-block; }

Luego, envuelve los divs que contienen las imágenes con otro div y dale el id container, así:

<div id="container">
  <!-- DIVS con imágenes -->
</div>

Hay varios tipos de display y tienen distintos comportamientos. En tu caso, servirían 2: inline e inline-block (el que utilicé yo). La diferencia entre estos 2, es que el primero solo utilizará el ancho y alto del contenido, aún cuando se especifique un ancho y un alto. Mientras que inline-block ocupará el espacio que se le asigne aunque no tenga contenido dentro. La mejor forma de aprender son ejemplos:

<html>
<head>
<style type="text/css">
			#container, #container1 { width: 50%; height: 60px; border: 1px solid black; margin: 2% 0; padding: 2%; }
			#container div { display: inline-block; width: 50px; height: 50px; background: #000; }
			#container1 div { display: inline; width: 50px; height: 50px; background: #000; }
		</style>
	</head>
	<body>
		<div id="results">
		</div>
		<div id="container">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div id="container1">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

Saludos.