Foros aprenderaprogramar.com

Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Jose Luis en 12 de Diciembre 2014, 17:12

Título: alinear dos o más divs horizontalmente ejercicio CU01029D curso CSS desde cero
Publicado por: Jose Luis en 12 de Diciembre 2014, 17:12
Buenas, estoy en la lección veintinueve en el ejercicio final y el enunciado es el siguiente:

Crea un documento HTML con 2 elementos div de anchura 250 píxeles, con un margen de 20px en todas direcciones y uno junto al otro (en horizontal). En cada div introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde y relleno a ambos elementos. Color de fondo #FFB6C1. La parte superior con borde de puntos redondeados, grosor 15 píxeles, color #DC143C y relleno de 30 píxeles. La parte derecha con borde de trazos o segmentos rectangulares, grosor 10 píxeles, color verde y relleno de 45 píxeles. La parte inferior con borde de línea doble, grosor 10 píxeles, color #FF00FF y relleno 0 píxeles. La parte izquierda con borde con efecto ridge, grosor 40 píxeles, color #2F4F4F y relleno 60 píxeles.

Mi pregunta es la del enunciado por mucho que he buscado no encuentro la manera de colocar los dos div en horizontal. He buscado en internet y se que se hace con float y de otras dos maneras más con position y display pero no encuentro en la web hasta donde he llegado como hacerlo y me gustaria saber donde viene porque no creo que la información esté después. Muchas gracias.

Título: Re:alinear dos o más divs horizontalmente ejercicio CU01029D curso CSS desde cero
Publicado por: Mario R. Rancel en 13 de Diciembre 2014, 10:11
Hola, creo que tienes razón en que la información viene después en el curso, en concreto en las entregas CU01033D y en la entrega CU01034D donde se explican las propiedades display y float.

De cualquier forma con lo explicado hasta la entrega CU01029D creo que se puede hacer todo lo que se pide excepto el posicionamiento en horizontal. Para solucionar el posicionamiento en horizontal se me ocurren varias cosas: una de ellas sería aplicarle a los div la propiedad display:inline-block; Esto hará que en vez de comportarse como elementos block se comporten como elementos inline, lo que hará que se coloquen en horizontal. Otra opción es usar float, aunque es preferible esperar a llegar a la explicación de float en el curso porque es un poco más complejo. Hay más posibilidades, pero no te recomiendo que te detengas mucho en esta cuestión porque a medida que avances en el curso irás siendo capaz de hacer cada vez más cosas.

Te animo a que lo intentes primero por tu cuenta y luego veas la solución propuesta en este hilo del foro: https://www.aprenderaprogramar.com/foros/index.php?topic=1110

Si tienes dudas vuelve a consultar.

Saludos