Ir para conteúdo

Arquivado

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

  • 0
andreymiragem

Como faço pra fazer os meus dois containers de conteúdo e conteúdo lateral ficarem corretos com flexbox?

Pergunta

0 respostas a esta questão

Recommended Posts

Até agora não há respostas para essa pergunta


  • Conteúdo Similar

    • Por aldo silva
      Estou desenvolvendo uma galeria de imagens. Mas não consigo remover o espaço vertical entre as imagens. Eu certamente estou fazendo algo errado, mas não consigo ver o erro. Preciso de ajuda. Eu tentei usar GRID, mas como as imagens são carregadas dinamicamente, não funcionou muito bem.
       
      Este é o código HTML
       
      <script> $(document).ready(function() { $.ajax({ type: "POST", url: "load-pics.php?id="+start, processData: false, contentType: "application/json", data: '', success: function(r) { r = JSON.parse(r) for (var i = 0; i < r.length; i++) { $('#gallery').append("<img class='item' id='" + r[i].id + "' src='/us/" + r[i].foto + "'>"); } start += 5; }, error: function(r) { console.log("Something went wrong!"); } }) }); </script> <style> .container { margin: 0 50px 0 50px; border: 1px solid #FF0000; height: 100%; } .flex { display: inline-flex; flex-direction: column; flex-wrap: wrap; flex-flow: column wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; align-self: flex-start; } .item { border: 3px solid #000; box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3); max-width: 23vw; } </style> <body> <div class="container"> <span id="gallery"> </span> </div>  E este o resultado:
    • Por leandro32
      Senhores, me ajudem pelo amor de Deus!!!
      Estou montando uma "Base de Documentos" onde eu trabalho. Essa base é dividida por tipo de Documento (CNH/RG/OUTROS) e ano de expedição (2019/2018/2017...). As máscaras principais (HOME's) já foram feitas, o problema é que não consigo vincular esses botões dos anos em DIV's diferentes.
      Alguém, em nome de Jesus Cristo, me ajuda a criar uma regra que, ao clicar no ano 2018,  doc aparece na DIV ao lado com a barra de ZOOM??? Porque eu já estou ficando louco!!!
       
                                                                          <!-- CÓDIGO DO SITE -->
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="estilo.css" />
         
                                                    <title>ACRE - RG</title>
      </head>

      <body>
                          <!-- CABEÇALHO COM MENUS -->
      <header>
      <div class="container">
          <div class="zoom">
              <img src="logo.png" class="img-responsive" height="95px" width="130px" border="2px">
          
                <div id="menu">
                    <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/Base%20Documental.html">HOME</a>
                    <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/RG.html">RG</a>
                    <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/CNH.html">CNH</a>
                    <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/OUTROS.html">OUTROS</a>
                </div>
          </div>
      </div>
      </header>
       
          <!-- O CORPO DO SITE -->
      <div class="container2">
      <fieldset>
      <center><h2><i> Estado do ACRE - RG</i></h2></center>
      </fieldset>
      </div>

      <div class="container3">
                                                 <!-- COLUNA DOS ANOS -->

        <div class="container4">
           <div class="col-lg-2 col-md-2 col-sm-2">
             <div style="height: calc(100vh - 230px); overflow-y: scroll; overflow-x: hidden; right: 16px">
               <div class="btn-group-vertical" role="group" aria-label="..."
                   <div class="zoom">

                          <button class="btn ng-scope btn-default" ng-class="{'btn-primary': analyser.selectedDocModel.guid === docModel.guid, 'btn-default': analyser.selectedDocModel.guid !== docModel.guid}" ng-repeat="docModel in analyser.filteredDocModels" ng-click="analyser.selectDocModel(docModel)" ng-show-img="areaimagem" style="-webkit-user-drag: none" class="ng-scope" img src="AM.01.jpg" class="img-responsive" href="AM.01.jpg" size="80%">
                                              <small class="ng-binding">RG</small>
                                              <br>
                                              <small class="ng-binding">AM- 2019</small>
                                          </button>
                         
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
       

          <!-- O RODAPÉ Do SITE -->

      <footer>
              <span> <b>BASE DOCUMENTAL</b> - &copy;<i>Leandro do Nascimento Martins</i></span>
      </footer>
      </div>
      </div>
      </div>
           
      </body>
      </html>
       
       
       
                                                                             <!-- ARQUIVO ESTILO.CSS -->
      /* PADRÃO CSS */

      /* eliminando configurações dos browsers*/
      * {margin: 0;    padding: 0;    font-family: verdana, helvetica, arial;}

      /* TODAS AS TAG's DECLARADAS */ /* PARA UMA "TAG - PARTE" NORMAL, USA-SE APENAS O NOME */
      p {color: silver;    font-size: 15px;    text-align: center;    font-family: arial, "Times new roman";    text-shadow: 1px 1px 1px #111111;}

      body {background-color: #E8E8E8;    width: 100%;}

      header {background-color: #08298A;    height: 100px;    padding: 2px;    width: 100%;}

      footer   {clear: both;    color: white;    background-color: #08298A;    height: 40px;    text-align: center ;    padding: 10px;    text-shadow: 1px 1px 1px black;}

      h1 {color: SILVER;    text-align: center;    margin: 0 0 50px 0;    text-shadow: 2px 2px 2px #111111;}
      h2 {color: SILVER;    text-align: center;    margin: 5px 0 5px 0;    text-shadow: 2px 2px 2px #111111;}
       
      /* TODAS AS  ID's */    /* PARA "IDENTIFICAÇÃO - ID" DA DIV USA-SE  .#. HASHTAG  */
      #div_principal {background-color: white;    clear: both;    background-size: 65%;    min-height: 485px;    padding: 40px 0 40px 0;    margin: 1% 1% 1% 1%;    width: 100%;}
      #logo {float: left;    margin: 0 20px 0 10px;}
      #menu {float: right;    margin-top: 40px;    text-transform: uppercase;}
      #menu a {padding: 32px 20px;    text-decoration: none;    color: white;    border-radius: 20px;    border-top-right-radius: 20px;    border-bottom-left-radius: 20px;    cursor: pointer;    transition: background-color 1s;}
      #menu a:hover {background-color: white;    color: black;}
      #btn-default {text-decoration: none;}

      /* CLASS */ /* PARA CLASSES-CONTAINER's DIFERENTES USA-SE O PONTO  .  */
      .efeito {background-color: rgba(0, 0, 0, 0.3);    padding: 100px 0 100px 0;}
      .container {width: 100%; /* largura */    margin: auto; /* ajuste automatico independente de resolução*/}

      .container2 {width: 97%; /* largura */    margin: auto; /* ajuste automatico independente de resolução*/    background-color: white;}
      .container3 {width: 95%;    margin: auto;    background-color: #FFFAFA;    clear: both;}
      .container4 {width: 10%;    float: left;    background-color: #FFFAFA;    clear: both; }
      .container5 {background-color: ;     float: left;}
      .col-lg-2 {width: 95%; }
      .col-md-2 {width: 50px;}
      .col-sm-2  { width: 79px;}
      .col-lg-10  { width: 80%; }

    • Por Carcleo
      Pessoal, estou com uma dúvida que está me tirando o sono!
       
      Então, vou exibir 2 situações com Flexbox onde 1 delas está dando uma falha. (Será mesmo?).
       
      Nessa versão, com DIV's, tudo funciona bem:

      CSS:
          span.vertical {         writing-mode: vertical-lr;         transform: rotate(180deg);     }     span.comum {                      }     div.cabecalhoVertical{         display: flex;         height: 200px;         border: .1px rgb(0,0,0) solid;              }     div.cabecalhoVertical div {         display: flex;         flex-grow: 1;         list-style: none;         border-right: .1px rgb(0,0,0) solid;         align-items: center;         justify-content: center;     }     div.cabecalhoVertical div span {         text-align: center;         font-weight: bolder;     } HTML:
      <div class='cabecalhoVertical'>     <div style='width:215px;'><span class='comum'   >Nome do Gcéu </span></div>     <div style='width:215px;'><span class='vertical'>Supervisor</span></div>     <div style='width:215px;'><span class='comum'   >Líder</span></div>     <div style='width:035px;'><span class='vertical'>Houve Supervisão?</span></div>     <div style='width:035px;'><span class='vertical'>Houve dia de Jejum?</span></div>     <div style='width:035px;'><span class='vertical'>Houve dia de Evangedismo?</span></div>     <div style='width:035px;'><span class='vertical'>Membros Compromissados</span></div>     <div style='width:035px;'><span class='vertical'>Visitantes</span></div>     <div style='width:035px;'><span class='vertical'>Crianças de 0 à 12 anos</span></div>     <div style='width:035px;'><span class='vertical'>Total de presentes</span></div>     <div style='width:035px;'><span class='vertical'>Ofertas</span></div>                         <div style='width:035px;'><span class='vertical'>Disicpulados</span></div>                         <div style='width:035px;'><span class='vertical'>Número de decisões</span></div>             </div>     Resultado:

       
      Agora com UL -> A falha:
       
      CSS:
          span.vertical {         writing-mode: vertical-lr;         transform: rotate(180deg);     }     span.comum {                      }     ul.cabecalhoVertical{         display: flex;         height: 200px;         border: .1px rgb(0,0,0) solid;              }     ul.cabecalhoVertical li {         display: flex;         flex-grow: 1;         list-style: none;         border-right: .1px rgb(0,0,0) solid;         align-items: center;         justify-content: center;     }     ul.cabecalhoVertical li span {         text-align: center;         font-weight: bolder;     }
      HTML:
      <ul class='cabecalhoVertical'>     <li style='width:215px;'><span class='comum'   >Nome do Gcéu </span></li>     <li style='width:215px;'><span class='vertical'>Supervisor</span></li>     <li style='width:215px;'><span class='comum'   >Líder</span></li>     <li style='width:035px;'><span class='vertical'>Houve Supervisão?</span></li>     <li style='width:035px;'><span class='vertical'>Houve dia de Jejum?</span></li>     <li style='width:035px;'><span class='vertical'>Houve dia de Evangedismo?</span></li>     <li style='width:035px;'><span class='vertical'>Membros Compromissados</span></li>     <li style='width:035px;'><span class='vertical'>Visitantes</span></li>     <li style='width:035px;'><span class='vertical'>Crianças de 0 à 12 anos</span></li>     <li style='width:035px;'><span class='vertical'>Total de presentes</span></li>     <li style='width:035px;'><span class='vertical'>Ofertas</span></li>                         <li style='width:035px;'><span class='vertical'>Disicpulados</span></li>                         <li style='width:035px;'><span class='vertical'>Número de decisões</span></li>             </ul>     Percebam agora na print como aparece um bloco adicional no lado esquerdo antes da primeira LI

       
      Gostaria de saber 2 coisas:
       
      1) Porquê isso acontece uma vez que list-style está setado para none nas LI's?
      2) Como corrigir essa falha?
       
      Obrigado a quem puder ajudar.
    • Por fabioseco
      Como inserir atributos flexbox no autocompletar do dw cs6
    • Por Luccallp
      space-between. Flex items são igualmente distribuídos na linha (se o espaço de sobra for negativo ou houver somente um flex item na linha, o comportamento é idêntico a flex-start)
       
      MEU CSS:
       
      #catalogoList {
      width: 70%; margin-left: 3%; margin-right: 5%; padding-bottom: 15px; border-top: 2px solid #8A7E7B; float: right; height: 300px; margin-top: 50px !important; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap;
      }
      #catalogoList .item {
      width: 24%; height: 360px; border: 1px solid #D9D9D9; margin-top: 15px; transition: 0.5s cubic-bezier(.77,.43,.42,1.34); overflow: hidden; position: relative;
      }
       
      No caso, são 4 blocos por linha, acontece que na última linha não tem 4 blocos, as vezes 2 ou 3 e ele acaba alinhando nas duas extremidades laterias (estou ciente do justify-content: space-between), mas não tem como fazer ele se comportar de outra forma, como o flex-start quando não tiver itens suficientes para preencher essa linha?
×

Informação importante

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