2010-09-29 29 views
21

¿Cómo restar ancho en CSS?Substracción de ancho CSS

Por ejemplo:

width = 100% - 10px

No estoy hablando de relleno o margen.

+0

@Kyle, lo siento pero 10px no es 10%. – Ruel

+0

@Kyle - no funcionará. 10%! = 10px a menos que el contenedor sea 100px. –

+0

Ajá, veo eso ...Lo siento, leí mal :) – Kyle

Respuesta

20

Ahora con calc la solución será:

width: calc(100% - 10px); 


Calc se puede utilizar con suma, resta, multiplicación , División.

Nota adicional:

Nota: El + y - los operadores deben estar siempre rodeados por espacios en blanco. El operando de calc (50% -8px) por ejemplo se analizará como un porcentaje seguido de una longitud negativa, una expresión no válida, mientras que el operando de calc (50% - 8px) es un porcentaje seguido de un menos signo y una longitud. Aún más, el calc (8px + -50%) se trata como una longitud seguida de un signo más y un porcentaje negativo. Los operadores * y/ no requieren espacios en blanco, pero agregarlos para mantener la coherencia es permitido y recomendado.

+2

¿qué es la compatibilidad del navegador para esto? – Mani

13

Simple: no puede hacer esto. Tendrás que usar alguna solución alternativa.

+0

Sí, después de todo estoy usando margen. Gracias Peter. –

2

Actualmente no hay tal funcionalidad. Todo lo que se puede hacer es:

width:auto; 
margin-right: 10px; 

que no es lo que desea.

+0

Sí, después de todo, estoy usando margen. Gracias Thariama. –

2

La única manera de lograr esto es construir el CSS usando LessCSS o una herramienta similar y luego procesar estos archivos en CSS generada - no se puede hacer sobre la marcha

+0

Intento utilizar CSS puro, pero gracias Nev. –

12

Bueno, hasta que se libere en CSS3 calc() todos los principales navegadores, todo lo que tienes que hacer es ajustar un div con otro y usar algunos márgenes de paddings. O bien, puede utilizar algunos javascript, como contar el ancho de la pantalla y establecer el ancho de un div en consecuencia.

+0

Sí, después de todo estoy usando margen. Gracias n1313. –

3

Es posible que pueda hacer esto con SASS, si está utilizando una pila que lo admita. Solo conozco a Ruby, pero bien podría haber otros.

SASS es un código de estilo CSS que genera CSS tradicional, puede usar variables, etc.

+0

Buena referencia, gracias Grant. –

+0

SASS es genial ... "height: 238 + 9 + px;" produce "altura: 247px"; en el archivo css de salida. – Ads

1

Normalmente, uno utiliza un enfoque dinámico, que genera código sobre la marcha. Por ejemplo, en PHP, al escribir la parte CSS,

$width = $all - 10; 
echo 'width:' . $width . 'px;'; 
+0

Sí, podemos hacerlo con PHP, pero no manejo la parte del servidor. Además, tengo muchos elementos que quiero aplicar. Gracias ring0. –