07 Mar ¿Maquetar con float:left o con display:inline-block? Ejercicio css
En este ejercicio vamos a practicar 2 opciones muy populares para apilar cajas (una caja es en realidad cualquier etiqueta, típicamente un div) unas al lado de las otras.
Son útiles para resolver este ejercicio las siguientes entradas del tutorial css :
- Como crear columnas con inline-block y float.
- Entrada dónde se usa la propiedad box-sizing.
- ¿Qué es un elemento inline-block?
- Posicionamiento flotante de cajas
¿Tienes todo el temario controlado?
Entonces entremos en materia.
Enunciado
Maqueta una página web atendiendo a las siguientes especificaciones:
- Hay 3 filas:
- En la primera fila hay 3 contenedores de colores rojo, verde y azul de un ancho de 33.33% cada una.
- En la segunda fila hay 1 contenedor negro de ancho 100%.
- En la tercera fila hay 2 contenedores de colores rosa y orange y anchos 50%.
- Todas las cajas tienen una altura de 200px.
- Todas las cajas están encerradas dentro de un wrapper de ancho 100% pero dimensiones máximas 1300px.
Resuelve el ejercicio aplicando 2 metodologías distintas.
La primera mediante el uso de la propiedad float:left;
La segunda mediante el uso de la propiedad display:inline-block;
Solución del ejercicio siguiendo la estrategia de position:float;
Soy un bloque de texto. Haz clic en el botón Editar para cambiar este texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo maquetación con float</title>
<meta charset="utf-8"/>
<meta name="author" content="francesc ricart"/>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
#contenedor{
width:100%;
max-width:1300px;
margin:auto;
}
section[class*="caja-"]{
border:1px solid #000;
height:200px;
float:left;
}
.caja-1{background-color:red;}
.caja-2{background-color:green;}
.caja-3{background-color:blue;}
.caja-4{
background-color:black;
width:100%;
}
.caja-5{background-color:pink;}
.caja-6{background-color:orange;}
.caja-1, .caja-2, .caja-3{width:33.33%;}
.caja-5, .caja-6{width:50%;}
</style>
</head>
<body>
<div id="contenedor">
<section class="caja-1"></section>
<section class="caja-2"></section>
<section class="caja-3"></section>
<section class="caja-4"></section>
<section class="caja-5"></section>
<section class="caja-6"></section>
</div>
</body>
</html>Solución del ejercicio siguiendo la estrategia de display:inline-block;
En este caso se usa la propiedad display:inline-block; a todos los div contenidos dentro del div con id=»wrapper».
Fijaros que para eliminar el espacio en blanco que suele quedar entre etiquetas div se ha optado por resetar los estilos a font-size:0;
En caso de escribir esta instrucción última recordar de asignar un tamaño de fuente a todas las etiquetas que contengan texto.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo maquetación con display:inline-block</title>
<meta charset="utf-8"/>
<meta name="author" content="francesc ricart"/>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-size:0;
}
p,a{font-size:16px;}
#contenedor{
width:100%;
max-width:1300px;
margin:auto;
}
section[class*="caja-"]{
border:1px solid #000;
height:200px;
/*float:left;*/
display:inline-block;
}
.caja-1{background-color:red;}
.caja-2{background-color:green;}
.caja-3{background-color:blue;}
.caja-4{
background-color:black;
width:100%;
}
.caja-5{background-color:pink;}
.caja-6{background-color:orange;}
.caja-1, .caja-2, .caja-3{width:33.33%;}
.caja-5, .caja-6{width:50%;}
</style>
</head>
<body>
<div id="contenedor">
<section class="caja-1"></section>
<section class="caja-2"></section>
<section class="caja-3"></section>
<section class="caja-4"></section>
<section class="caja-5"></section>
<section class="caja-6"></section>
</div>
</body>
</html>¡Hola!
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
::before y ::after tienen muchos usos interesantes para dar estilos en nuestros documentos web. Este conocimiento te puede ayudar por ejemplo a estilizar listas html
Se muestran dos soluciones simples que usan exclusivamente CSS para el conocido reto de terminar un contenido con 3 puntos suspensivos. "..."
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
Qué es la propiedad opacity de css y como podemos usarla. Atención porqué para transaprencias no siempre es la mejor opción.
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Las propiedades shorthand son muy útiles. En esta entrada aprenderás una forma práctica de recordar el significado de las abreviaciones para border, margin y padding.
matias
Posted at 04:18h, 24 juliogracias muy claro me fue de mucha ayuda, saludos
Francesc Ricart
Posted at 17:26h, 24 julio¡Gracias Matias!