/ No cliques aquí - Contacto

¿Maquetar con float:left o con display:inline-block? Ejercicio css

Home > Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web.  > ¿Maquetar con float:left o con display:inline-block? Ejercicio css

07 Mar ¿Maquetar con float:left o con display:inline-block? Ejercicio css

Posted at 07:30h in Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web., Ejercicios CSS by
0
(0)

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 :

¿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;

web con columnas.
Enunciado visual del ejercicio de maquetación de contenedores en forma de columna.

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 0 / 5. Votos: 0

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Entradas relacionadas:

FontPair, un recurso para emparejar tipografías y alternativas
¿Cómo emparejar tipografías en una página web sin morir en el intento? Pocas decisiones en el mundo web causan tanta controversia. ¿Necesitas herramientas para acertar?
Ejemplo de centrado horizontal de una caja con CSS
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Genera una escala cromática con css
En este ejercicio css se practica la creación de una paleta de colores mediante rgba. Además, se practican otros conceptos importantes como el selector de atributo. Incluye solución.
Ejercicio css sobre forzar y romper la propiedad de herencia
Rápido ejercicio para practicar el concepto de herencia en css. Incluye solución y explicación.
Ejercicio sobre web safe colors, rgb, rgba y colores hexadecimales
Ejercicio para practicar los conceptos de colores web safe colors, rgb, rgba y colores hexadecimales en css. Incluye solución.
La propiedad overflow
Resumen de uso de la propiedad de overflow de CSS. Apuntes de teoría del curso IFCD0110 del curso confección y publicación de páginas web.
Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

2 Comments

Post A Comment