tengo un div principal, que puede cambiar su tamaño, dependiendo del espacio disponible. Dentro de ese div, tengo divs flotantes. Ahora, me gustaría tener espacio entre estos divs, pero no espacio para el div principal (ver dibujo).¿Cómo poner espacio entre divs flotantes?
¿Hay una manera de hacer esto con CSS?
Gracias
he encontrado una solución, que al menos ayuda en mi situación, es probable que no es adecuado para otras situaciones:
doy todo mi hijo verde divs un margen completo:
margin: 10px;
Y para el div padre amarilla que rodea i establece un margen negativo:
margin: -10px;
también tuve que quitar cualquier anchura o altura explícita establecer para el div padre amarillo, de lo contrario se hizo n ot trabajo.
De esta manera, en términos absolutos, los divs secundarios están alineados correctamente, aunque el div amarillo principal obviamente está desactivado, lo que en mi caso es correcto, porque no será visible.
pero eso pone un margen en la parte inferior también, significa espacio entre los divisores verdes inferiores y el borde inferior del div amarillo. No quiero eso. – ghost23
Lo siento. Iba por tu texto y no revisé tu diagrama. No creo que haya una solución pura de CSS para esto, ciertamente no es una buena solución de búsqueda cruzada. Usaría JavaSCript para descubrir qué divs están en la segunda línea, asignarles una clase y darle a esa clase 'margin-bottom: 0'. No creo que puedas ponerte mucho mejor. – Jeff
esto agregará el margen inferior a todos los div y creará espacio con div principal que no se requiere aquí. – punit
¿No es sólo un caso de aplicación de una clase apropiada a cada div?
Por ejemplo:
.firstRowDiv { margin:0px 10px 10px 0px; }
.secondRowDiv { margin:0px 10px 0px 0px; }
Esto depende de si se sabe de antemano qué DIV para aplicar a qué clase.
hola, sí, bueno, como traté de decir, los divs están flotando y el div principal puede cambiar su tamaño, por lo que no puedo saber dónde estará cada div. – ghost23
este momento para responder a una entrada antigua, pero se puede hacer lo siguiente:
Asumiendo que su div contenedor tiene una clase "amarilla".
.yellow div {
// Apply margin to every child in this container
margin: 10px;
}
.yellow div:first-child, .yellow div:nth-child(3n+1) {
// Remove the margin on the left side on the very first and then every fourth element (for example)
margin-left: 0;
}
.yellow div:last-child {
// Remove the right side margin on the last element
margin-right: 0;
}
El número 3 n + 1 es igual a cada cuarto elemento emitida y claridad sólo funcionan si se sabe cuántos se mostrará en una fila, pero debe ilustrar el ejemplo. More details regarding nth-child here.
Nota: Para: primer hijo para trabajar en IE8 y anteriores, se debe declarar <!DOCTYPE>.
Note2: El selector: nth-child() es compatible con todos los navegadores principales, excepto IE8 y anteriores.
Hola, gracias por la respuesta, pero como dije en mi pregunta, el contenedor puede cambiar su tamaño, por lo que podría haber espacio para más de tres divs en una fila. – ghost23
Llego tarde a la fiesta, pero ... He tenido una situación similar y descubrí padding-right (y abajo, arriba, a la izquierda también, por supuesto). Por la forma en que entiendo su definición, pone un área de relleno dentro de el interior div por lo que no es necesario agregar un margen negativo en el elemento primario como lo hizo con un margen.
padding-right: 10px;
¡Esto me ha funcionado!
Dado que este relleno está dentro del div, tendrá el color de fondo del div. En este caso, sería 10px de verde en el borde derecho de div verde. Por ejemplo, si el div verde contiene texto, se asegurará de que no haya texto en ese 10px, pero no hará que esa área sea amarilla. Por lo tanto, no es útil en la situación de OP. Pero es bueno que la gente lo sepa. – ToolmakerSteve
Una respuesta tardía.
Si desea utilizar una cuadrícula como esta, debe echar un vistazo a Bootstrap, es relativamente fácil de instalar, y le brinda exactamente lo que está buscando, todo envuelto en html/css + sencillo y agradable funciona fácilmente para hacer que los sitios web respondan.
¡Dé un ejemplo! Solo "usar Bootstrap" no me ayuda para nada. En realidad, yo * estoy * usando Bootstrap y tengo esta pregunta. –
Solo hay una desventaja en este enfoque: si tu div principal está alineado con el lado derecho de la página (o dentro de 10px), los 10px del margen negativo se superpondrán al borde de la ventana, ampliando la página y causando un barra de desplazamiento horizontal. Esto puede ser más un problema con el diseño receptivo donde necesita comenzar a tratar con anchos de vista que a veces son tan estrechos como 320px en total. – thomasrutter
Nota: Dicho esto, ciertamente no he encontrado una mejor solución. – thomasrutter
Sí, tienes razón. Como dije, ciertamente no es aplicable en todas las situaciones. – ghost23