Estou tentando criar um sistema de menus com uma imagem e texto acima e abaixo. Os dados são dinâmicos. Estou querendo que o sistema de menus apareça para que cada imagem fique a uma distância igual da outra, para que se alinhem em uma grade de imagens na horizontal e na vertical.
O problema é o texto. Se o texto for maior que a imagem, a div será ampliada. No entanto, cria uma lacuna de aparência estranha, pois as imagens não são mais igualmente espaçadas uma com a outra.
Para contornar isso, acho que a melhor abordagem seria fazer com que cada um dos outros divs adotasse o tamanho do div maior. No entanto, não tenho certeza de como fazer isso.
Eu tentei com flexbox usando a flex-wrappropriedade Enquanto está sendo bem organizado, não consegui encontrar uma maneira de alinhar cada uma das imagens a uma distância igual entre si.
Como faço para conseguir isso?
Meu código é o seguinte:
#outer {
display: flex;
}
#main {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border: solid black 25px;
border-radius: 25px;
width: 450px;
height: 500px;
padding: 20px;
}
.section {
background-color: #ddd;
padding: 15px;
}
.label, .icon {
text-align: center;
}<div id="outer">
<div id="main">
<div class="section">
<div class="label">Label 1AAAAAAAAAAA</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 1B</div>
</div>
<div class="section">
<div class="label">Label 2A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 2B</div>
</div>
<div class="section">
<div class="label">Label 3A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 3B</div>
</div>
<div class="section">
<div class="label">Label 4A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 4B</div>
</div>
<div class="section">
<div class="label">Label 5A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 5B</div>
</div>
</div>
</div>PS. Também não sei por que meus divs de seção estão aumentando sua altura. Portanto, qualquer insight sobre isso também seria apreciado.
align-itemsé definidastretchpor padrão. Você pode facilmente mudar isso:align-items: flex-start;Respostas:
Não tenho certeza se você pode fazer com que cada elemento cresça para ser tão grande quanto o elemento maior, mas se você puder assumir que deseja um número específico de elementos em cada linha, apenas faça o mesmo tamanho. Eu acho que isso é muito mais fácil com uma grade de CSS em vez de flexbox. Veja a solução abaixo. Uso a grade para posicionar os elementos da seção e para garantir que dentro de cada seção todas as três partes (texto superior, imagem, texto inferior) ocupem exatamente 1/3 da div cada - isso é para garantir que todas as imagens também se alinhem verticalmente . Além disso, uso etiquetas flexíveis para garantir que os textos estejam no meio (horizontal e verticalmente).
fonte
Experimente este código rápido. Uma coisa está faltando é a consulta da mídia sobre como se comportar quando não pode caber em 3 colunas seguidas, para as quais tudo o que eu mudaria é a
max-widthpropriedade a ser50% - individual item padding left and right - how much space you want betweene mudeflex: 1 33%paraflex: 1 55%(Você pode pular o valor do preenchimento se alterar o funcionamento do tamanho da caixa para que a largura inclua o preenchimento na largura com a propriedade de tamanho da caixa como esta )
https://codepen.io/mihaelnikic/pen/bGGPBYG
CSS :
fonte
Espero que isso ajude.
CSS
HTML
fonte
Você pode tentar adicionar largura e quebra de palavras ao contêiner de etiquetas e ajustar a largura de acordo
fonte
Se estou entendendo o seu problema corretamente, a lacuna estranha da qual você deseja se livrar é a da segunda linha depois que a primeira linha for preenchida. Se isso é tudo o que você está tentando resolver, talvez tudo o que você precise fazer seja mudar
justify-contentdespace-betweenparaflex-startcom uma margem adicionada aos seus.sectionelementos e o preenchimento#mainajustado para corresponder. O espaçamento agora será de 20 px entre todas as imagens.Se você não gosta como que parece, você pode tentar outros
justify-contentvalores comoflex-start,flex-end,space-around,space-evenly.Como alternativa, você pode se livrar
justify-contente usarflex-growpara expandir cada.sectionuma delas para se ajustar ao ambiente.Como alternativa, se você deseja que as calhas se alinhem enquanto ainda se expandem para ajustar
.sectiono conteúdo de cada elemento, tente usardisplay: table.A desvantagem aqui é que você precisa dividir o HTML em linhas.
Se você realmente deseja que todos os
.sectionelementos se expandam sejam iguais ao maior.section,você provavelmente precisará usar JavaScript, pois os elementos irmãos em CSS não sabem muito um do outro.
Você pode adicionar o seguinte JavaScript à sua página e ajustar o CSS da seguinte forma:
fonte
Eu sugeriria CSS Grid também.
Você especifica 3 colunas e 2 linhas que compartilham a largura igualmente entre si e diz às seções que tenham uma pequena margem para mostrar as lacunas entre elas:
fonte
Uma solução CSS pura com todos esses critérios é, eu acho, impossível, mas é possível uma solução JS combinada com CSS Grid.
Uma solução CSS pura em que o elemento se adapta dinamicamente ao texto e aos conjuntos que mudam para todos os outros elementos não é possível. Podemos definir dinamicamente a largura do elemento para se adaptar ao texto, mas não podemos fazer com que essa largura seja mínima para todos os outros elementos que têm a mesma classe.
fonte
dive deixar os forros, as bordas. e omin-widthemin-heightno principaldiv.É isso:
verifique https://jsfiddle.net/sugandhnikhil/b216mx5d/
redimensione a janela para ver eqqual sapcing entre a imagem !!!!
Muito obrigado !!!!!!!
:-)
fonte
Apenas me pergunto por que deixar o comprimento do texto definir o tamanho do
div? Isso não tornaria a interface do usuário estranha? Eu sugiro definir a largura para o rótulo e todo o excesso de texto se tornarellipsis (...). Com isso, não há necessidade deJavaScriptcódigos, apenas alguns adicionaiscsspara o seu.label. Aqui está um trecho. Isso pareceria muito melhor do quedivalterar seus tamanhos sempre que houver um texto longo.Se você está preocupado com "como meus espectadores podem ler o restante do texto?" então você pode simplesmente aplicar alguns efeitos
on hoverao seu exemploellipsisdeste codepen (exemplo que não o meu) ou talvez tentar algo como esta solução SO .Espero que isto ajude!
fonte
Este é um ângulo ligeiramente diferente do que outras respostas sugerem. Você pode considerar a possibilidade de truncar o texto em vez de.
fonte