css divide ancho 100% a 3 columnas

Tengo un diseño donde tengo 3 columnas.

Por lo tanto, divido el 100% por 3.

El resultado es obviamente 33.333 ….

Mi objective es perfecto 1/3 de pantalla .

Pregunta:

¿Cuántos números después del punto puede manejar CSS para especificar 1/3 de ancho?

por ejemplo, 33.33333 (n=5) ← cuántos n puede manejar css

HTML:

 

CSS:

 #c1, #c2, #c3 { width: 33%; // 1/3 of 100% } 

¿Hay una mejor manera de dividir por 3?

Un 1/3 perfecto no puede existir en CSS con soporte completo de navegador cruzado (nada debajo de IE9). Personalmente lo haría: (No es la solución perfecta, pero es tan buena como la que obtendrá para todos los navegadores)

 #c1, #c2 { width: 33%; } #c3 { width: auto; } 

Usa CSS calc() :

 body { margin: 0; } div { height: 200px; width: 33.33%; /* as @passatgt mentioned in the comment, for the older browsers fallback */ width: calc(100% / 3); display: inline-block; } div:first-of-type { background-color: red } div:nth-of-type(2) { background-color: blue } div:nth-of-type(3) { background-color: green } 
 

¿Qué hay de usar el modelo flex CSS3:

Código HTML:

 
c1
c2
c3

Código CSS:

 *{ margin:0; padding:0; } #wrapper{ display:-webkit-flex; -webkit-justify-content:center; display:flex; justify-content:center; } #wrapper div{ -webkit-flex:1; flex:1; border:thin solid #777; } 

Usando este violín , puedes jugar con el width de cada div. He intentado tanto en Chrome como en IE y noté una diferencia de ancho entre el 33% y el 33.3% . También noto una diferencia muy pequeña entre el 33.3% y el 33.33% . No noto ninguna diferencia más allá de esto.

La diferencia entre el 33.33% y el 33.333...% teórico es un mero 0.00333...% .

En aras de los argumentos, digamos que el ancho de mi pantalla es 1960px ; Una resolución bastante alta pero común. La diferencia entre estos dos anchos sigue siendo solo 0.065333...px .

Entonces, más allá de dos decimales, la diferencia en la precisión es despreciable.

En caso de que se pregunte, en el sistema de plantillas Bootstrap (que es muy preciso), aquí se explica cómo dividen las columnas cuando aplica la clase .col-md-4 (1/3 del sistema de 12 columnas)

CSS

 .col-md-4{ float: left; width: 33.33333333%; } 

No soy un fanático de la flotación, pero si realmente quiere que su elemento sea perfectamente 1/3 de su página, entonces no tiene opción porque a veces, cuando utiliza el elemento de bloque en línea, el navegador puede considerar el espacio en su HTML como un espacio de 1px que rompería tu perfecto 1/3. Espero que haya ayudado!

En caso de que alguien todavía esté buscando la respuesta,

Deja que el navegador se encargue de eso. Prueba esto:

  • display: table en el elemento contenedor.
  • display: table-cell en los elementos hijos.

El navegador lo dividirá en partes iguales si tiene 3 o 10 columnas.

EDITAR

el elemento contenedor también debe tener: table-layout: fixed contrario, el navegador determinará el ancho de cada elemento (la mayoría de las veces no es tan malo).

Solo para presentar una forma alternativa de solucionar este problema (si realmente no te importa el soporte de IE):

Una solución de código suave sería usar display: table (no es compatible con IE7) junto con table-layout: fixed (para asegurar columnas de igual ancho).

Lea más sobre esto aquí .

Descubrí que a veces se requieren 6 lugares decimales (al menos en Chrome) para que el 1/3 devuelva un resultado perfecto.

Por ejemplo, 1140px / 3 = 380px

Si tuviera 3 elementos dentro del contenedor 1140, tendrían que tener un ancho establecido en 33.333333% antes de que la herramienta de inspección de Chrome muestre que están a 380 px. Cualquier cantidad menor de lugares decimales, y Chrome devuelve un ancho menor de 379.XXX px

2018 Update Este es el método que utilizo width: 33%; width: calc(33.33% - 20px); El primer 33% corresponde a los navegadores que no admiten calc () dentro de la propiedad de ancho, el segundo tendría que ser el prefijo del proveedor con -webkit- y -moz- para obtener la mejor compatibilidad posible con varios navegadores.

 #c1, #c2, #c3 { margin: 10px; //not needed, but included to demonstrate the effect of having a margin with calc() widths/heights width: 33%; //fallback for browsers not supporting calc() in the width property width: -webkit-calc(33.33% - 20px); //We minus 20px from 100% if we're using the border-box box-sizing to account for our 10px margin on each side. width: -moz-calc(33.33% - 20px); width: calc(33.33% - 20px); } 

tl; dr cuenta para su margen

 .selector{width:calc(100% / 3);} 

No creo que puedas hacerlo en CSS, pero puedes calcular un ancho de píxel perfecto con javascript. Digamos que usas jQuery:

Código HTML:

 

Código JS:

 $(function(){ var total = $("#container").width(); $("#col1").css({width: Math.round(total/3)+"px"}); $("#col2").css({width: Math.round(total/3)+"px"}); $("#col3").css({width: Math.round(total/3)+"px"}); });