Articles of css3

¿Cómo envolver flexbox en múltiples filas y columnas?

¿Estoy tratando de construir una galería en forma de mampostería, pero no puedo entender cómo envolver flexboxes? Obtuve una lista de UL simple y agregué el estilo necesario, pero las cosas no están flotando y ajustándose como debería. .masonry { margin: 48px -2px; padding-left: 0; list-style: none; align-items: flex-start; flex-direction: row; flex-wrap: wrap; display: flex; […]

Envolviendo elementos flexibles en la última fila

Tengo una img-gallery que ahora se está centralizando correctamente. El problema es que cuando la imagen se ajusta a una nueva línea, también se está alineando con el centro. Después de envolver, la imagen debe alinearse verticalmente con la primera imagen en la fila anterior. .gallery-links {justify-content: flex-start;} Esto lo hace casi resuelto. Pero después […]

Hacer que los elementos hermanos tomen el mismo ancho rompe el texto en ellos

Estoy tratando de establecer el ancho del div, y está contento con el ancho del párrafo de user-title en él. Este es el HTML y CSS: .panel { margin-bottom: 20px; width: auto; display: inline-flex; flex-direction: column; box-shadow: 0 2px 4px 0 #C6C2BF; padding: 0.5rem 1rem 1rem; } .user-title { display: flex; } .panel>div { display: […]

¿Por qué hay desplazamiento vertical en el contenedor principal?

Estoy muy confundido aquí. Dado que el body es 100% (ancho / alto) y main-container también es 100% (ancho / alto), ¿por qué hay desplazamiento vertical? Creé un jsFiddle para explicar la situación: http://jsfiddle.net/dcnnvgs1/1/ body, html { width: 100%; height: 100%; font-family: “Trebuchet MS !important”; background-color: #00b3b3; } .main-container { display: flex; flex-direction: column; flex-wrap: […]

¿Por qué no se calcula correctamente la altura de mi elemento de cuadrícula?

Estoy teniendo problemas con la altura de un elemento de cuadrícula CSS. El código que estoy usando es: .gridContainer { border: thin solid black; background: rgba(255, 0, 0, 0.5); display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; width: 100px; height: 100px; grid-template-areas: ‘windowContentHolder’; } .gridItem { grid-area: windowContentHolder; background: rgba(255, 255, 0, 0.5); width: 200%; height: 200%; […]

¿Por qué posición: pegajoso no funciona cuando el elemento está envuelto dentro de otro?

Estoy experimentando con Nav pegajoso y me encontré con un problema. El problema es que cuando coloco el botón de navegación en otro elemento ya no está pegajoso. .nav-wrapper{ position: absolute; bottom: 0; } .nav-wrapper nav{ position: sticky; top: 0; } Home About

CSS ajuste el texto no funciona en IE

Estoy enfrentando algunos problemas con algunos estilos que funcionan correctamente tanto en Chrome como en Firefox, pero no en IE. El problema al que me enfrento básicamente es que un estilo particular aplicado funciona bien en Chrome, pero no en IE. El texto no encaja en la columna. ¿Cómo reproducirlo? Eche un vistazo a este […]

Gestión de contenido justificado: espacio entre la última fila

Mi objective es tener tres elementos flexibles por fila y usar space-between modo que el primer y el tercer elemento en cada fila toquen el exterior del contenedor pero permanezcan espaciados a la misma distancia. Esto funciona según lo previsto, pero los problemas surgen en la segunda fila cuando el quinto elemento no se alinea […]

Limitar la altura de desplazamiento dinámicamente.

No sé cómo limitar la altura desde el div divisor sin fijar la altura máxima. Aquí está la situación: Quiero limitar mi div elemento de desplazamiento a la altura de mi img-item. pantalla: flex no funciona porque da la altura del div más alto (que es el elemento de desplazamiento) altura: 100% y la función […]

Borde oscuro raro: después de la flecha css en Firefox

En un bash de hacer una flecha en CSS puro para mi información sobre herramientas, encontré un problema en Firefox: Intenté encontrar lo que estaba causando el borde oscuro en Firefox sin éxito. Aquí hay un jsfiddle y un fragmento en ejecución que demuestra el problema: .tooltip { position:relative;z-index:1; display:inline-block;padding-right:10px; } .tooltip .info { position:absolute;left:100%;top:-7px; […]