Porque no aparecen todos los 5 contenedores?

Sebastian Cifuentes

Sebastian Cifuentes

Pregunta
student
hace 5 años

Porque no aparecen todos los 5 contenedores?

11 respuestas
para escribir tu comentario
    Diego Alejandro Moreno Pedroza

    Diego Alejandro Moreno Pedroza

    student
    hace 3 años

    Realmente solo son 4 visibles ya que uno de ellos contiene otros dos

    Dario Paladines

    Dario Paladines

    student
    hace 3 años

    Tienen que cambiar el tamaño de height, para que lo puedan visualizar como explicaba anteriormente al tener height auto toma el tamaño de los contenedores a los cuales contiene es decir 300px y por eso no "aparece", pero si colocas height: 400px(o cualquier valor arriba de 300px) podrás ver que esta "detrás" de los contenedores

    Lina Sánchez

    Lina Sánchez

    student
    hace 3 años

    Hola, me pasa lo mismo que a Juanbautista0 Este es mi código:

    .container { display: flex; flex-wrap: wrap; } .c1, .c2, .c3, .c4, .c5 { width: 100%; min-width: 100px; height: 150px; } .c4 { height: auto; } .c1 { background-color: #003476; } .c2 { background-color: #0062d2; } .c3 { background-color: #b4d2f7; } .c4 { background-color: #d5dfef; } .c5 { background-color: #dfe1e5; }```
    Kevin J. Zea Alvarado

    Kevin J. Zea Alvarado

    student
    hace 4 años

    Hola, Juan. 👋 Comparte tu código para saber qué está pasando.

    JUAN JOSE BAUTISTA ANACONA

    JUAN JOSE BAUTISTA ANACONA

    student
    hace 4 años

    Buen día a mi me sigue sin aparecer el c4 aun colocándole el height auto, lo coloque pero de 3 contendores me aparecen 4 y faltaría uno que no identifico el como hacerlo aparecer

    (ayuda)

    Dario Paladines

    Dario Paladines

    student
    hace 4 años

    Si justo lo que dice @pipemolano y para los nuevos que estamos viendo esta clase, c4 contiene a c2 y c3, al colocarle c4= height auto el c4 crece los 150px de c2 + los 150px de c3, es decir 300px. Si le colocan al c4 mas de 300px van a ver que esta "detras" de estos dos contenedores y aparecerá

    MIguel Oviedo

    MIguel Oviedo

    student
    hace 4 años

    Sin el height auto aparecen 3 (c1,c2,c5) con el height auto aparecen 4 (c1, c2, c3,c5) el c4 estaconteniendo los boxes c2 y c3 y es por esa razón que no aparece en el layout.

    Felipe Molano Corredor

    Felipe Molano Corredor

    student
    hace 4 años

    Hola! porque c4 es un contenedor de dos contenedores es decir, en c4 esta c2 y c3, entonces el espacio que ocupa c4 lo vas a ver con los dos c2 y c3 por eso no se ve. aparte al inicio del video solo se veian 3 porque c2 y c3 tienen la misma altura, y c4 que es su contenedor tambien tiene una altura definida, entonces digamos que uno estaba encima del otro. al darle un height auto como lo hizo el profe a c4 lo que hace es que c4 crezca "automaticamente" con el tamaño de sus contenidos, en este caso c2 y c3, con lo cual alli si se ven ambos. espero de ayude

    Rafael Uribe Gallardo

    Rafael Uribe Gallardo

    student
    hace 5 años

    Ivan, creo que c4 no se muestra porque en si hay dos contenedores con color diferentes dentro de el mostrando su color al frente, si a c2 y c3 les asignas un margin se podra ver el color de c4

    Ivan E. Batista-Ochoa

    Ivan E. Batista-Ochoa

    student
    hace 5 años

    Como dice @Kevin c2 y c3 que tienen altura de 150px están dentro o “debajo” del c4 y c4 tiene una altura (heigth) de 150px. Lo que pasa es algo así como que 150px de altura que tiene c2 + 150px de altura que tiene c3 + 150px de altura que tiene c4 no caben en 150px de altura c4 que es quien los contiene. . Lo que sí no entiendo es porque se muestra c2 y no se muestra c4 que es el contenedor y está mas abajo en la regla definida en el css. Porque por lo que veo la caja que se despliega es la que tiene el color que se le definió a c2.

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.

Curso de HTML y CSS [Empieza Gratis]
Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.