Jump to content

Archived

This topic is now archived and is closed to further replies.

YuriLuiz

alinhamentos de Div's

Recommended Posts

Boa noite !

Estou iniciando nesse mundo de html, e estou com uma grande duvida sobre o alinhamento de div's, mas creio que estou fazendo da forma errada...

Gostaria de opinião de uma pessoa mais experiente.

 

abaixo está meu código como exemplo .

abraços!

ThWImy1.png?1

 

9bXO0fM.png?1

Share this post


Link to post
Share on other sites

  • Similar Content

    • By lezão
      Boa noite!
      Td bem com vcs?
       
      Meus amigos, estou precisando de um css que eu não faço ideia por onde começar ja pesquisei e nada.
      só encontrei como imagem, vejam.

       
      será que tem como fazer em css desse modelo, o texto tem q ficar sobreposto a cor do fundo.
       
    • By FabianoSouza
      Pessoal, é possível abrir uma nova aba/janela do navegador dentro de uma DIV?
      Como faço?
       
      Pergunto isso porque o IFRAME não vai funcionar para o meu objetivo (já testei).
       
      Estou tentando adaptar esse código JQUERY para o Javascript puro, pra saber se a ideia funciona (não manjo de JQUERY).
      https://stackoverflow.com/questions/33296867/how-to-open-the-content-inside-a-div-tag-in-new-tab
       
      Grato.
    • By kaioneresm
      Olá boa tarde, alguem sabe um codigo javascript facil que sirva para abrir uma div como se fosse um pou-up no centro da tela e dentro dela conter um X para fechá-la? 
       
      obrigado!!
    • By luiz monteiro
      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á.
       
       
       

    • By LucasRochaPL
      Olá a todos, estou construindo um pequeno site para a empresa que eu trabalho atualmente, porém como ainda sou iniciante estou tendo algumas dificuldades, e uma delas é que eu não consigo colocar as divs lado a lado, tentei varias coisas como usar o inline e float, mas fica tudo bem bagunçado, se vocês puderem por favor dar alguma dica ou me dizer oque estou fazendo de errado.
      <style> * {box-sizing: border-box;}   .container {   position: relative;   width: 50%;   max-width: 300px; }   .image {   display: block;   width: 100%;   height: auto; }   .overlay {   position: absolute;    bottom: 0;    background: rgb(0, 0, 0);   background: rgba(0, 0, 0, 0.5); /* Black see-through */   color: #f1f1f1;    width: 100%;   transition: .5s ease;   opacity:0;   color: white;   font-size: 20px;   padding: 20px;   text-align: center; }   .container:hover .overlay {   opacity: 1; } .container::after {   content: "";   clear: both;   display: table; } </style>   <div class="titulo">Produtos</div> <p>A Gap conta com uma grande variedade de      rádios e equipamentos, para atender melhor      a necessidade de nossos clientes, trabalhamos com rádios moveis,      portáteis e equipamentos para videomonitoramento. </p>   <div class="titulo">Portáteis</div> <div class="container">     <img src="products/images/dep450.jpg" alt="rádio motorola DEP450" class="image">     <div class="overlay">Motorola DEP450</div> </div> <div class="container">     <img src="products/images/ep450.jpg" alt="rádio motorola EP450" class="image">     <div class="overlay">Motorola EP450</div> </div> <div class="container">     <img src="products/images/dgp8050.jpg" alt="rádio motorola DGP8050" class="image">     <div class="overlay">Motorola DGP8050</div> </div>   <div class="titulo">Móveis</div>   <div class="container">     <img src="products/images/dem300.jpg" alt="rádio motorola DGM5000" class="image">     <div class="overlay">Motorola DEM300</div> </div>   <div class="titulo">Videomonitoramento</div>   <div class="container">     <img src="products/images/intelbrass3330.jpg" alt="camera " class="image">     <div class="overlay">Câmera Intelbras S3330</div> </div>   
×

Important Information

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