Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

3dmaniaco

Encaixar DIV

Por , em Desenvolvimento frontend

Recommended Posts

3dmaniaco    1

3dmaniaco
Postado

Olá

Eu preciso encaixar as div's de forma dinâmica, sem utilizar position: absolute, nem margin-top, eu gostaria de utilizar algo como float:

Veja essa imagem:

imagem.png

Meu Código:



<!DOCTYPE html>
<html>
<head>
    <style>
        
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
  <div style="float: left; width: 100px; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">1</div>

  <div style="float: left; width: 100px; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">2</div>

  <div style="float: left; width: 200px; height: 200px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">3</div>

  <!-- Fazer essa div abaixo se alinha a esquerda na linha de baixo -->     

 <div style="position: relative; float: left; width: 100px; height: 70px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF; clear: left;">4</div>
    <script type="text/javascript">
        
    </script>
</body>
</html>

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

3dmaniaco    1

3dmaniaco
Postado

3dmaniaco,

Hoje você tem o Masonry (plugin JS) que faz o mesmo que pediu e também tem o panel stacks que vem junto do Bootstrap 4.

Abraços!

Olá L. Henrique. Tudo Bem ? Cara, você me ajudaria utilizar o Mansory ? Eu gostaria de saber como fazer meu codigo acima, a funcionar com o mansory, utilizando uma unica coluna. Você me ajuda ? Obrigado Cara.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito