-
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 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 andreymiragem
Eu consegui deixar ele assim, porém tive que usar margin pra fazer isso, e sei que não está correto, alguém pode me ajudar?
-
