poner - ¿La mejor manera de representar 1/3 de 100% en CSS?

css background size cover center

Question

Tengo un gran <div> con tres pequeños <div> dentro, en línea. Cada uno tiene 33% de ancho, pero eso causa algunos problemas de alineación porque 3 * 33%! = 100%. ¿Cuál es la mejor manera de representar un tercero perfecto en CSS de esta manera? Tal vez solo 33.33%?

Answer 1

¿Estás teniendo en cuenta los márgenes? Podría ir al 30% por columna con un margen del 5% a cada lado de la columna central.

Ejemplo rápido

Answer 2

Ahora que calc es ampliamente compatible con los navegadores modernos, puede usar:

#myDiv {
    width: calc(100%  /3);
}

O puede usar esto como una alternativa si su navegador no lo admite:

#myDivWithFallback {
    width: 33.33%;
    width: calc(100% / 3);
}

Answer 3

La pantalla con la resolución más alta es una pantalla LCD NEC de no producción con una resolución de 2800x2100. Incluso en ese tamaño, un píxel es 0.0357% del ancho de la pantalla. Por lo tanto, el 33.33% debería estar lo suficientemente cerca hasta que las pantallas de 5.000 píxeles se conviertan en la norma.

Sin embargo, John Resig investigó el redondeo subpíxel en diferentes navegadores, por lo que depender de sus tres columnas para igualar exactamente el ancho de la pantalla puede que nunca tenga una solución perfecta.

Answer 4

.col_1_3 {
    width: 33%;
    float: left;
}

.col_1_3:nth-of-type(even) {
    width: 34%;
}