Buenas gente del foro, resulta que hace poco estoy aprendiendo a dar estilos responsivos(? (ni idea como traducirlo bien :xD) manualmente y tengo una consulta: ¿Cómo se podría rellenar los espacios en blanco para que queden el fondo de las cajas con el mismo tamaño?
(https://i.imgur.com/wgxzyjm.png)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="responsive-media-queries.css">
</head>
<body>
<div class="contenedor" style="color: white;font-size: 2em;">
<div class="fila">
<div style="background-color: red;" class="columna-largo-2 columna-mediano-2 columna-peque-3 columna-mini-12">
<p>Texto</p>
</div>
<div style="background-color: green;" class="columna-largo-6 columna-mediano-5 columna-peque-9 columna-mini-12">
p*3>Lorem
</div>
<div style="background-color: blue;" class="columna-largo-4 columna-mediano-5 columna-peque-12 columna-mini-12">
p*4>Lorem
</div>
</div>
</div>
<h1>Hola</h1>
</body>
</html>
/*
Estilos Globales
*/
*
{
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
font-family: sans-serif;
box-sizing: border-box;
}
.contenedor
{
position: relative;
margin: auto;
width: 100%;
height: auto;
}
.fila
{
position: relative;
margin: auto;
width: 100%;
height: auto;
clear: both;
display: table;
}
[class*="columna-"]
{
float: left;
border: 2px solid black;
/*padding: 20px;*/
}
/*Pantallas*/
@media(min-width: 1200px)
{
.columna-largo-12{width:100%;}
.columna-largo-11{width:calc(11*100%/12);}
.columna-largo-10{width:calc(10*100%/12);}
.columna-largo-9{width:calc(9*100%/12);}
.columna-largo-8{width:calc(8*100%/12);}
.columna-largo-7{width:calc(7*100%/12);}
.columna-largo-6{width:calc(6*100%/12);}
.columna-largo-5{width:calc(5*100%/12);}
.columna-largo-4{width:calc(4*100%/12);}
.columna-largo-3{width:calc(3*100%/12);}
.columna-largo-2{width:calc(2*100%/12);}
.columna-largo-1{width:calc(1*100%/12);}
}
@media(max-width:1199px) and (min-width:992px)
{
.columna-mediano-12{width:100%;}
.columna-mediano-11{width:calc(11*100%/12);}
.columna-mediano-10{width:calc(10*100%/12);}
.columna-mediano-9{width:calc(9*100%/12);}
.columna-mediano-8{width:calc(8*100%/12);}
.columna-mediano-7{width:calc(7*100%/12);}
.columna-mediano-6{width:calc(6*100%/12);}
.columna-mediano-5{width:calc(5*100%/12);}
.columna-mediano-4{width:calc(4*100%/12);}
.columna-mediano-3{width:calc(3*100%/12);}
.columna-mediano-2{width:calc(2*100%/12);}
.columna-mediano-1{width:calc(1*100%/12);}
}
@media(max-width:991px) and (min-width:768px)
{
.columna-peque-12{width:100%;}
.columna-peque-11{width:calc(11*100%/12);}
.columna-peque-10{width:calc(10*100%/12);}
.columna-peque-9{width:calc(9*100%/12);}
.columna-peque-8{width:calc(8*100%/12);}
.columna-peque-7{width:calc(7*100%/12);}
.columna-peque-6{width:calc(6*100%/12);}
.columna-peque-5{width:calc(5*100%/12);}
.columna-peque-4{width:calc(4*100%/12);}
.columna-peque-3{width:calc(3*100%/12);}
.columna-peque-2{width:calc(2*100%/12);}
.columna-peque-1{width:calc(1*100%/12);}
}
@media(max-width:767px)
{
.columna-mini-12{width:100%;}
.columna-mini-11{width:calc(11*100%/12);}
.columna-mini-10{width:calc(10*100%/12);}
.columna-mini-9{width:calc(9*100%/12);}
.columna-mini-8{width:calc(8*100%/12);}
.columna-mini-7{width:calc(7*100%/12);}
.columna-mini-6{width:calc(6*100%/12);}
.columna-mini-5{width:calc(5*100%/12);}
.columna-mini-4{width:calc(4*100%/12);}
.columna-mini-3{width:calc(3*100%/12);}
.columna-mini-2{width:calc(2*100%/12);}
.columna-mini-1{width:calc(1*100%/12);}
}
B#
Hoy en día ya está obsoleto usar floats para responsive. Tienes flex y grid para hacer tu desarrollo más sencillo.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
Tal y como lo tienes puesto, puedes hacer que .fila sea de tipo flex y alinear los hijos con strech. En la clase .fila seria quitar display: table y poner flex.
display: flex;
align-items: stretch;
flex-wrap: wrap;
Demo: https://jsfiddle.net/afmjncz0/1/
Te recomiendo mirarte los enlaces que te puse arriba, y si quieres indagar más puedes mirar como lo hace Bootstrap o ver PoCs de flex grids.
https://codepen.io/flpwgr/pen/qbMJaY
https://github.com/twbs/bootstrap/tree/main/scss
Saludos
Como comentó anteriormente drvy el uso de Floats está obsoleto y no es una buena práctica. Aunque si estás recién aprendiendo tal vez sea útil conocer también esas clases...
Me gustaría invitarte a conocer css-grid y flex-box, es más sencillo y con muchísimo potencial.
Además hoy día es una buena práctica aportar semántica a nuestro código con el uso de las "nuevas" etiquetas HTML5 (header, nav, main, section, article, aside)
Por el tema de css-grid y flexbox, en youtube hay videos muy cortitos e intuitivos que te ayudan de un vistazo a implementar estas caracterisitcas css.
No te sale mas facil utilizar un framework ya hecho como bootstrap?, Lo puedes hacer en unas pocas líneas:
https://startbootstrap.com/template/simple-sidebar
Capaz se le pidieron de tarea para la escuela y debe hacerlo sin bootstrap... pero lo recomendable es usar bootstrap ;-)
Cita de: Beginner Web en 26 Abril 2021, 12:18 PMCapaz se le pidieron de tarea para la escuela y debe hacerlo sin bootstrap... pero lo recomendable es usar bootstrap ;-)
No, no era tarea de escuela, quería aprender por mi cuenta como hacer los estilos a mano propia sin utilizar ningún framework, solo que estaba y sigo todavía en falta de práctica con css. :xD
Por otro lado, estaba en ese momento siguiendo una serie de videos de youtube en los cuál expllican paso a paso como crear los estilos con media queries y mencionan a Bootstrap como referencia...
Dejo la serie de videos por si a alguien más le interesa como armar lo que estaba armando yo en su momento:
[youtube=640,360]https://www.youtube.com/watch?v=p0-4RM_1tXY[/youtube]
[youtube=640,360]https://www.youtube.com/watch?v=mmcR4iVqJBg[/youtube]
[youtube=640,360]https://www.youtube.com/watch?v=-nPUUbW5-5k[/youtube]
[youtube=640,360]https://www.youtube.com/watch?v=em1Z1d0lbPw[/youtube]
[youtube=640,360]https://www.youtube.com/watch?v=_w7AWkzyM6c[/youtube]
B#
genial