1

introducir la descripción de la imagen aquí

es decir que no siga en linea recta (lo de arriba es lo que quiero hacer)

introducir la descripción de la imagen aquí

#principal {
display: flex;
flex-direction: row;
}

#principal > div {
width: 33%;
}

#columna1 {
color: green;
}

#columna2 {
color: red;
}

#columna3 {
color: grey;
}

h4 { color: blue;

}
span {
color: purple;
}
.alineado {
float: left;
}
<!DOCTYPE html>
<html lang="es">
<head>
	
	<meta charset="utf-8" />
	<link rel="stylesheet" href="./css/estilos.css" />
</head>
<body>

	<div id="principal">
	
<div id="columna1"><h4>El señor de los anillos: La comunidad del anillo</h4>Año 2001</br>
Director: Peter jackson</br>
Web oficial: <a href="http://lordoftherings.net" class="enlacenav" target="_blank">http://lordoftherings.net</a></br>
<img class="alineado" src="C:\Users\uno\Pictures\142154fcb523f8727db041bafeb7fb746fbeb68e_full.jpg" alt="venom">fdasdfssfdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaafd</div>
<div id="columna2"><h4>El señor de los anillos: La comunidad del anillo</h4>Año 2001</br>
Director: Peter jackson</br>
Web oficial: <a href="http://lordoftherings.net" class="enlacenav" target="_blank">http://lordoftherings.net</a></br>
<img class="alineado" src="C:\Users\uno\Pictures\142154fcb523f8727db041bafeb7fb746fbeb68e_full.jpg" alt="venom"><p>fdasdfssfdafdSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p></div>
<div id="columna3">Columna 3</div>
</div>





</body>
</html>

1 respuesta 1

0

En tu ejemplo pones un texto sin espacios y por eso no se ajusta.

Reemplacé el texto por un Lorem Ipsum al igual que las imágenes para que puedas ver la diferencia.

Otra opción en caso de que por alguna razón quieras usar ese tipo de texto, es aplicar la propiedad CSS word-break al contenedor del texto:

word-break: break-word;

#principal {
display: flex;
flex-direction: row;
}

#principal > div {
width: 33%;
}

#columna1 {
color: green;
}

#columna2 {
color: red;
}

#columna3 {
color: grey;
}

h4 { color: blue;

}
span {
color: purple;
}
.alineado {
float: left;
}
<!DOCTYPE html>
<html lang="es">
<head>
	
	<meta charset="utf-8" />
	<link rel="stylesheet" href="./css/estilos.css" />
</head>
<body>

	<div id="principal">
	
<div id="columna1"><h4>El señor de los anillos: La comunidad del anillo</h4>Año 2001</br>
Director: Peter jackson</br>
Web oficial: <a href="http://lordoftherings.net" class="enlacenav" target="_blank">http://lordoftherings.net</a></br>
<img class="alineado" src="https://picsum.photos/50/50" alt="venom">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="columna2"><h4>El señor de los anillos: La comunidad del anillo</h4>Año 2001</br>
Director: Peter jackson</br>
Web oficial: <a href="http://lordoftherings.net" class="enlacenav" target="_blank">http://lordoftherings.net</a></br>
<img class="alineado" src="https://picsum.photos/50/50" alt="venom"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
<div id="columna3">Columna 3</div>
</div>





</body>
</html>

3
  • Gracias, y en la última como haría para poner la imágen a la derecha y el texto a la izquierda?
    – Satou
    Commented el 20 feb. 2019 a las 3:23
  • @Satou A las imágenes que quieres alinear a la derecha les aplicas float: right; en lugar de float: left;
    – RockoDev
    Commented el 20 feb. 2019 a las 3:37
  • Mucha gracias, ya se como hacerlo
    – Satou
    Commented el 20 feb. 2019 a las 14:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.