[Resolvido] Problemas com organização de divs
E aí pessoal!
Minha questão de hoje é a seguinte, ao usar o display inline-block ou inline-flex ocorre um desalinhamento dos blocos. Tentei usar outro inline, porem sem sucesso.
Para melhor visualizar o que quero dizer, anexo esta uma print do resultado indesejável.
Preciso que os blocos fiquem alinhados, porem ao inserir duas divs (2 e 3) no terceiro bloco ocorre o desalinhamento.
Vou deixar o código para melhor entender.
//==================HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div class="container">
<div class="blocos">0</div>
<div class="blocos">1</div>
<div class="blocos">
<div class="linhas">2</div>
<div class="linhas">3</div>
</div>
<div class="blocos">4</div>
</div>
</body>
</html>
//================== CSS
@charset "utf-8";
*
{
margin: 0px;
padding: 0px;
list-style: none;
resize: none;
outline: none;
text-decoration: none;
}
html, body
{
width: 100%;
overflow-x: hidden;
font-family: verdana;
letter-spacing: 1.5555px;
font-weight: normal;
}
.container
{
width: 100%;
padding-left: 13px;
background: #000;
}
.blocos
{
display: inline-block;
width: 300px;
height: 250px;
background: #888;
}
.linhas
{
background: #f60;
width: 100%;
height: 122px;
margin-bottom: 2px;
}
Agradeço desde já.
Discussão (2)
Carregando comentários...