LabEx
EntrarJunte-se

Criando Layouts em Blocos Responsivos

Beginner

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

Introdução

Neste laboratório, aprenderemos como criar um layout de 3 blocos usando display: inline-block. Você usará width e calc para dividir uniformemente o contêiner em 3 colunas e definirá font-size para evitar espaços em branco. Ao final deste laboratório, você terá uma melhor compreensão de como criar um layout de blocos limpo e responsivo sem usar float, flex ou grid.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 96%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Layout de 3 Blocos

index.html e style.css já foram fornecidos na VM.

Para criar um layout de 3 blocos, use display: inline-block em vez de float, flex ou grid. Use width em combinação com calc para dividir a largura do contêiner uniformemente em 3 colunas. Para evitar espaços em branco, defina font-size como 0 para .tiles e como 20px para elementos <h2> para exibir o texto. Observe que o uso de font-size: 0 para combater espaços em branco entre blocos pode causar efeitos colaterais se você usar unidades relativas (por exemplo, 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;
}

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório de Layout de 3 Blocos. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.