Estoy tratando de crear un sistema de menús con una imagen y texto arriba y abajo. Los datos son dinámicos. Quiero que el sistema de menús aparezca de modo que cada imagen esté a la misma distancia entre sí para que se alineen en una cuadrícula de imágenes tanto horizontal como verticalmente.
El problema es el texto. Si el texto es más largo que la imagen, entonces el div se agranda. Sin embargo, entonces crea una brecha de aspecto incómodo ya que las imágenes ya no están equidistantes entre sí.
Para evitar esto, creo que el mejor enfoque sería que cada uno de los otros divs adoptara el tamaño del div más grande. Sin embargo, no estoy seguro de cómo hacer esto.
He intentado con flexbox usando la flex-wrappropiedad. Si bien se está ajustando bien, no he podido encontrar una manera de hacer que cada una de las imágenes se alinee a la misma distancia entre sí.
¿Cómo hago para lograr esto?
Mi código es el siguiente:
#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>PD. Tampoco estoy seguro de por qué mis divisiones de sección aumentan su altura. Por lo tanto, cualquier idea sobre esto también sería apreciada.
align-itemsestá configuradastretchde manera predeterminada. Puede cambiar eso fácilmente:align-items: flex-start;Respuestas:
No estoy seguro de si puede hacerlo para que cada elemento crezca hasta ser tan grande como el elemento más grande, pero si pudiera suponer que desea un número específico de elementos en cada fila, simplemente haga que tengan el mismo tamaño. Creo que esto es mucho más fácil con una cuadrícula css en lugar de flexbox. Vea la solución a continuación. Utilizo la cuadrícula para colocar los elementos de sección , así como para asegurarme de que dentro de cada sección las tres partes (texto superior, imagen, texto inferior) tomen exactamente 1/3 del div cada una, esto es para asegurarse de que todas las imágenes también se alineen verticalmente . Además, utilizo flex en las etiquetas para asegurarme de que los textos estén en el medio (horizontal y verticalmente).
fuente
Dale una vuelta a este codepen rápido. Una cosa que falta es la consulta de medios sobre cómo comportarse cuando no puede caber en 3 columnas seguidas, por lo que todo lo que cambiaría es la
max-widthpropiedad50% - individual item padding left and right - how much space you want betweeny cambiarflex: 1 33%aflex: 1 55%(Puede omitir el valor de relleno si cambia la forma en que funciona el tamaño de la caja para que el ancho incluya el relleno en su ancho con una propiedad de tamaño de caja como esta )
https://codepen.io/mihaelnikic/pen/bGGPBYG
CSS :
fuente
Espero que esto sea de ayuda.
CSS
HTML
fuente
Puede intentar agregar ancho y salto de palabra al contenedor de etiquetas y ajustar el ancho en consecuencia
fuente
Si entiendo su problema correctamente, la extraña brecha de la que desea deshacerse es la de la segunda fila una vez que se ajusta la primera fila. Si eso es todo lo que está tratando de resolver, entonces quizás todo lo que necesita hacer es cambiar
justify-contentdespace-betweenaflex-startcon un margen agregado a sus.sectionelementos y el relleno en su#mainajuste para que coincida. El espacio ahora será de 20 píxeles entre todas las imágenes.Si no te gusta la forma en que se ve, se puede probar otros
justify-contentvalores comoflex-start,flex-end,space-around,space-evenly.Alternativamente, puede deshacerse de él
justify-contenty usarloflex-growpara expandir cada uno.sectionpara que se ajuste a su entorno.Alternativamente, si desea que sus canales se alineen mientras se expanden para adaptarse a
.sectionlos contenidos de cada elemento, puede intentar usarlosdisplay: table.La desventaja aquí es que necesita dividir el HTML en filas.
Si, en cambio, realmente desea que todos los
.sectionelementos se expandan para que sean iguales al.sectionelemento más grande ,lo más probable es que necesites usar JavaScript ya que los elementos hermanos en CSS no se conocen mucho entre sí.
Puede agregar el siguiente JavaScript a su página y ajustar el CSS como tal:
fuente
Sugeriría CSS Grid también.
Usted especifica 3 columnas y 2 filas que comparten el ancho equitativamente entre sí, y le dice a las secciones que tengan un pequeño margen para mostrar los espacios intermedios:
fuente
Creo que una solución CSS pura con todos esos criterios es imposible, pero es posible una solución JS combinada con CSS Grid.
Una solución CSS pura donde el elemento se adapta dinámicamente al texto y establece que el cambio a todos los demás elementos no es posible. Podemos establecer dinámicamente el ancho del elemento para adaptarlo al texto, pero no podemos hacer que ese ancho sea el mínimo para todos los demás elementos que tienen la misma clase.
fuente
divy deja los rellenos, los bordes. y elmin-widthymin-heighten generaldiv.Eso es todo:
consulte https://jsfiddle.net/sugandhnikhil/b216mx5d/
¡Cambie el tamaño de la ventana para ver el equivalente entre la imagen!
¡¡¡¡¡¡¡Gracias una tonelada!!!!!!!
:-)
fuente
Solo me pregunto por qué dejar que la longitud del texto defina el tamaño del
div? ¿No haría eso que la IU fuera rara? Sugeriría configurar el ancho para que se convierta la etiqueta y todo el desbordamiento de textoellipsis (...). Con esto, no hay necesidad deJavaScriptcódigos, solo algunos adicionalescsspara su.label. Aquí hay un fragmento. Esto se vería mucho mejor quedivcambiar el tamaño cada vez que haya un texto largo.Si le preocupa "¿cómo pueden leer mis lectores el resto del texto?" entonces puede simplemente aplicar algunos efectos
on hovera su muestra deellipsiscódigo abierto (muestra no mía) o quizás probar algo como esta solución SO .¡Espero que esto ayude!
fuente
Este es un ángulo ligeramente diferente al que sugieren otras respuestas. Posiblemente podría considerar truncar el texto.
fuente