Autor Tema: alinear dos o más divs horizontalmente ejercicio CU01029D curso CSS desde cero  (Leído 4438 veces)

Jose Luis

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 4
    • Ver Perfil
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.

« Última modificación: 13 de Diciembre 2014, 10:10 por Mario R. Rancel »

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
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

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".