Tengo una gran <div> con tres pequeñas <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%?¿La mejor manera de representar 1/3 de 100% en CSS?
¿Está 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.
La pantalla de alta resolución es a non-production NEC LCD screen 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, 33.33% debe estar lo suficientemente cerca hasta que las pantallas de 5.000 píxeles de ancho se conviertan en la norma.
John Resig did some research en el redondeo de sub-píxeles en diferentes navegadores, sin embargo, por lo que dependiendo de sus tres columnas para igualar exactamente el ancho de la pantalla pueden no tener una solución perfecta.
Esa "alta" suena un poco baja para los monitores actuales que no son de producción . Esto parece un poco más razonable como un límite tecnológico actual. http://en.wikipedia.org/wiki/Ultra_High_Definition_Television – Marcel
Ahora que calc es widely supported entre los navegadores modernos, se puede utilizar:
#myDiv {
width: calc(100% /3);
}
O puede utilizar esto como una alternativa en caso de que el navegador no lo apoyaría:
#myDivWithFallback {
width: 33.33%;
width: calc(100%/3);
}
No olvides el respaldo: '.column-one-third {width: 33.33%; ancho: calc (100%/3); } ' De esta forma puede admitir navegadores no calcificados. –
He encontrado que 6 decimales a menudo son necesarios para calcular correctamente el 1/3 exacto de un div. 'ancho: 33.333333%;' – Garconis
.col_1_3 {
width: 33%;
float: left;
}
.col_1_3:nth-of-type(even) {
width: 34%;
}
.col_1_3 {ancho: 33.33%; float: left;} es un mejor enfoque. Tal vez algunos tamaños de cajas: border-box y algo de relleno. –
Solo arroje suficientes decimales hasta que sea poco probable que alguien tenga una computadora de escritorio lo suficientemente grande como para que sig.figs sea relevante para el cálculo. –
No puede especificar fracciones, por lo que 33.33% es prácticamente su única opción. – meagar
Información útil: [Problemas de procesamiento de subpíxeles en CSS] (http://ejohn.org/blog/sub-pixel-problems-in-css/) – drudge