Jump to content
arthurcastro

Alinhamento de DIV sem usar position.

Recommended Posts

Oi! Tudo bem?
Poderiam me dar uma ajuda, por favor? :)


Estou precisando alinhar algumas DIVS da seguinte maneira:

Supondo que tenhamos uma div pai de largura 100%:
Na primeira linha: 3 DIVS de mesmo tamanho (largura: 33.3333% altura: 120px), seguida por uma DIV coluna para anúncio de mesma largura só que com altura de 240px.
Na segunda linha: 3 DIVS de mesmo tamanho (largura: 33.3333% altura: 120px), com a continuação da DIV coluna para anúncio da linha de cima.

Como faço para que as 3 divs da segunda linha encostem próximo as 3 DIVS da primeira linha visto que a DIV de anúncio empurra as DIVS da segunda linha pra baixo e sem usar position: absolute ou fixed.


Tem algum float ou display que faça as DIVS se ajustarem automaticamente sem precisar forçar nada com position, margin e essas outras opções?

 

#div {
    display: inline-block;
    width:120px;
    height:120px;
    border: 1px solid #000000;
}

Como fazer as 3 DIVS de baixo encaixarem ali no espaço que ficou em branco?

hiw.JPG.cc29fbf6a18b48c154355f4fc1ea1f44.JPG

<div id="wrapper">
    <div id="div">DIV<br/><br/><br/><br/><br/><br/></div>
    <div id="div">DIV<br/><br/><br/><br/><br/><br/></div>
    <div id="div">DIV<br/><br/><br/><br/><br/><br/></div>
    <div id="div" style="height: 240px;">DIV ADS<br/><br/><br/><br/><br/><br/></div>
    <div id="div">DIV<br/><br/><br/><br/><br/><br/></div>
    <div id="div">DIV<br/><br/><br/><br/><br/><br/></div>
    <div id="div">DIV<br/><br/><br/><br/><br/><br/></div>

</div>

Share this post


Link to post
Share on other sites

@arthurcastro  Salvo tenha sido apenas para demonstrar, lembro que "id" é único, não utilize em vários elementos, para isso, utilize classes. Quanto a sua questão, tem algumas sugestões:

1 - Se as alturas dos elementos são fixas, você pode trabalhar com uma margem negativa;

2 - Em vez de utilizar os elementos em linhas, utilize em colunas definindo a largura (33.33%) e "float: left" nelas;

3 - Grid layout em javascript: https://masonry.desandro.com/

 

Att.

  • +1 1

Share this post


Link to post
Share on other sites
  1. coloque o elemento DIV ADS na última posição na marcação HTML.
  2. crie um container para os seis primeiros elementos DIV.
  3. flutue esse container à esquerda e o DIV ADS direita.
  4. flutue os seis DIVs à esquerda.
  5. ajuste espaçamentos e larguras com CSS.

Esquema do layout:

 

divs.jpg

  • Obrigado! 1
  • +1 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By juliosonic
      Boa noite..
      Estou desenvolvendo um site de Reiki https://reikicuritiba.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica Curitiba
      Tantra em Curitiba

      Obrigado
      Att
      Julio Cezar
       
       
       
    • By Marcones Borges
      Olá, estou com o seguinte problema, não estou conseguindo alinhar a div a baixo da outra.
       
      Tenho a div linha, div assinatura, div conteúdo.
      A div linha precisa ficar a pós o conteúdo, após o texto linha e assinatura...
       
      porém não fica.
      Veja o css
      #texto1 {     position:absolute;     left: 30px;     top: 310px;     font-size:16px;     letter-spacing: .1rem;     font-family:courier,arial,helvetica;     line-height: 1.5;     text-align: justify;     padding-left: 2%;     padding-right: 5%;     padding-bottom: 2em;     float:right;     height:902px;     z-index: 1;   #linha1{     position:fixed;     left: 70px;     bottom: 80px; } #assinatura {     border-radius: 10%;     left: 435px;     overflow: hidden;     position:absolute; }  
      O html
      <div id="texto1"><?=nl2br($cliente->conteudo)?></div> <div id="linha1"> ___________________________________ </div> <div id="assinatura"> &nbsp;&nbsp;<?=$cliente->secretario?> - <?=$cliente->convencao?><br> &nbsp;&nbsp;&nbsp;<b>SECRETÁRIO(A)</b><br> </div>
    • By Marcones Borges
      Olá, estou com uma dúvida, como faço para transformar um arquivo gerado com dados do sistema em jpg?
       
      Tenho uma pagina que pega informações do cliente para gerar um cartão, nome, foto e uma imagem de background.
      Até ai tudo bem, esta gerando a imagem que preciso, agora preciso criar um botão para exportar ela em jpg ou compartilhar nas redes a imagem gerada...
       
      Assim eu abro ela em outra página.
      <code]>
      <a href='cartao_aniversariante.php?id=<?=$cliente->id?>' target="_blank"><img src="imagens/niver.png" width="20" height="20" title="Cartão Aniversário"></a>
      </code>

      Tentei anexar a imagem aqui mais não permite pelo tamanho.
       
      Preciso exportar esta nova página aberta.... 
    • By GOD
      Quero um código div ou qualquer outra forma, para atingi esse resultado do link
       https://drive.google.com/file/d/0B8Ssi9zuKdQWMExWeVpGUXN0MlRsUzdmdGRuTFl2eU1yejB3/viewocal
       
      Para ficar nesse local.
      https://drive.google.com/file/d/0B8Ssi9zuKdQWeGZSSnVBaFBxM1FUN1hEeWdrRzhTNWI0Q01Z/view
       
      Meu objetivo é que em cada quadro da div, fique uma noticia de um site especifico, que pretendo colocar através de plugin rss.
       
       
      Enfim espero uma ajuda sobre como posso fazer isso
       
       
    • By Marcones Borges
      Olá, estou fazendo um banner virtual, ele vem com fundo default e uma imagem sobrepondo ele (foto de uma pessoa), queria remover o fundo da imagem, deixando apenas a imagem da pessoa, como faço isso?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.