Substracción de ancho CSS

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

Por ejemplo:

width = 100% - 10px

No estoy hablando de relleno o margen.

Fuente

2010-09-29 Jeaf Gilbert

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

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

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

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.

Fuente

2014-07-25 01:58:31 mpgn

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

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

Fuente

2010-09-29 08:30:57 Peter

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

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

width:auto; 
margin-right: 10px;

que no es lo que desea.

Fuente

2010-09-29 08:31:08 Thariama

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

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

Fuente

2010-09-29 08:32:19

Intento utilizar CSS puro, pero gracias Nev. –

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.

Fuente

2010-09-29 08:33:43 n1313

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

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.

Fuente

2010-09-29 08:37:58

Buena referencia, gracias Grant. –

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

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;';

Fuente

2010-09-29 08:40:22

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

Respuesta

Cuestiones relacionadas