0
476
Views¿Cómo poner tres div en un div principal de modo que dos estén debajo apilados uno encima del otro a la izquierda y uno a la derecha? (Leer la descripción)
Tengo un div principal clasificado como outer con tres hijos llamados top-left , bottom-left y right .
El de la derecha tiene una altura 100vh y un ancho 80vw . Los de la izquierda tienen un ancho 20vw y una altura indefinida. Además, el derecho debe fijarse en el lugar, por lo que cuando el usuario se desplaza, los izquierdos se desplazan mientras que el derecho permanece donde está.
¿Cómo hago que los divs caigan en sus lugares apropiados?
Aquí hay una imagen aproximada de lo que quiero en mi página web:
·
Juan Pablo Isaza
1 answers
Answer question0
Utilice un diseño de cuadrícula:
.outer { display: grid; grid-template-areas: "tl r" "bl r"; grid-template-columns: 20vw 1fr; grid-template-rows: 30vh 1fr; height: 100vh; } #top-left { grid-area: tl; background-color: red; } #bottom-left { grid-area: bl; background-color: green; } #right { grid-area: r; background-color: blue; } <div class="outer"> <div id="top-left">Top Left</div> <div id="bottom-left">Bottom Left</div> <div id="right">Right</div> </div> Una guía completa de Grid | Trucos CSS - Trucos CSS
Diseño de cuadrícula CSS - CSS: hojas de estilo en cascada | MDN
·
Juan Pablo Isaza
Report
Answer question