Alinhando div com HTML5 e CSS

03/09/2017

Nessa vídeo-aula vamos esplicar como alinhar automaticamente as divs no nosso projeto. Para isso, vamos utilizar a linguagem de marcação HTML5 e o arquivo de estilização em cascata CSS.

HTML5 para alinhar divs

Vamos iniciar chamando nosso arquivo externo e vamos criar uma div pai e algumas divs flutuantes que serão alinhadas, conforme código abaixo:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <div class='container'>
            <div class='bloco'></div>
            <div class='bloco'></div>
            <div class='bloco'></div>
    </div>
</body>
</html>

Estilizando as divs para ficarem organizadas

No nosso CSS iremos estilizar as divs bloco de forma flutuantes para que fiquem horizontalmente e verticalmente organizadas, conforme código abaixo:

.container{width:100%;}
.bloco{float:left; width: 30%; margin: 20px 1.5333333%; height:300px;}

Não esqueça de usar media-queries para melhorar a estética das divs para dispositivos mobile. Boa sorte!

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Tooltip com CSS

Nessa vídeo-aula aprenderemos como fazer uma Tooltip, aqueles balãozinhos com dicas a respeito de textos ou formulários. Para isso, utilizaremos HTML5 e CSS.

CSS

As folhas de estilo em cascata (CSS) são responsáveis pela estilização e design do nosso website.