LabEx
EntrarÚnete

Creando diseños de mosaicos responsivos

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, aprenderemos cómo crear un diseño de tres bloques utilizando display: inline-block. Utilizaremos width y calc para dividir uniformemente el contenedor en tres columnas y establecer font-size para evitar espacios en blanco. Al final de este laboratorio, tendrás una mejor comprensión de cómo crear un diseño de bloques limpio y reactivo sin utilizar float, flex o grid.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 96%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Diseño de tres bloques

index.html y style.css ya se han proporcionado en la máquina virtual.

Para crear un diseño de tres bloques, utiliza display: inline-block en lugar de float, flex o grid. Utiliza width en combinación con calc para dividir uniformemente el ancho del contenedor en tres columnas. Para evitar espacios en blanco, establece font-size en 0 para .tiles y en 20px para los elementos <h2> para mostrar el texto. Tenga en cuenta que utilizar font-size: 0 para combatir los espacios en blanco entre bloques puede causar efectos secundarios si se utilizan unidades relativas (por ejemplo, em).

<div class="tiles">
  <div class="tile">
    <img src="https://via.placeholder.com/200x150" />
    <h2>30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img src="https://via.placeholder.com/200x150" />
    <h2>30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img src="https://via.placeholder.com/200x150" />
    <h2>30 Seconds of CSS</h2>
  </div>
</div>
.tiles {
  width: 600px;
  font-size: 0;
  margin: 0 auto;
}

.tile {
  width: calc(600px / 3);
  display: inline-block;
}

.tile h2 {
  font-size: 20px;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicitaciones! Has completado el laboratorio de diseño de tres bloques. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.