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

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

Print Friendly, PDF & Email
¿Maquetar con float:left o con display:inline-block? Ejercicio css
Valora esta entrada

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!

Entradas relacionadas:

Concepto de herencia en CSS
- 334
¿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...
Ejemplo de centrado horizontal de una caja con CSS
- 593
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Ejemplo de menú vertical con submenú horizontal mediante CSS
- 421
Código html y css de como crear un menú vertical con un submenú horizontal.
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 120
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Elementos en línea. Elementos bloque. Elementos inline-block.
- 599
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
La propiedad z-index
- 110
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 271
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
- 285
Ejemplos prácticos y visuales dónde se muestran los posicionamientos static | absolute | relative | fixed | sticky. Incluye código CSS y HTML
Ejercicio nivel básico sobre selectores CSS
- 43
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.
Resumen de como comentar código en html, css y javascript
- 772
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.