Calcul de la largeur à partir d'un pourcentage en pixel puis moins par pixel dans LESS CSS

Question

Je vais calculer la largeur d'un élément en pourcentage et en pixels. Je vais donc soustraire -10px en utilisant la fonction MOINS y calc() . C'est possible ?

div {
    span {
        width:calc(100% - 10px);
    }
}

J'utilise CSS3 calc() donc ça ne marche pas : calc(100% - 10px)

Ejemplo: si 100% = 500px alors largeur = 490px (500-10) ;

J'ai fait une démo pour tester : http://jsfiddle.net/4DujZ/55/

alors les rembourrages vont dire : 5 (10px / 2) tout le temps quand je redimensionne.

Puis-je le faire en MOINS ? Je sais comment faire en jQuery et en CSS simple comme margin padding ou autre... mais je vais essayer de faire fonctionnel en MOINS con calc()

Answer 1

Vous pouvez échapper à la calc afin d'éviter qu'ils ne soient évalués à la compilation.

En utilisant votre exemple, vous devez simplement entourer les arguments, comme ceci :

calc(~'100% - 10px')

Démo : http://jsfiddle.net/c5aq20b6/

---

Je trouve que je l'utilise de l'une des trois façons suivantes :

L'évasion de base

Tout ce qui se trouve à l'intérieur de la calc est défini comme une chaîne de caractères, et est totalement statique jusqu'à ce qu'il soit évalué par le client :

Entrée LESS

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

Sortie CSS

div > span {
  width: calc(100% - 10px);
}

Interpolation des variables

Vous pouvez insérer une variable LESS dans la chaîne de caractères :

Entrée LESS

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

Sortie CSS

div > span {
  width: calc(100% - 10px);
}

Mélange des valeurs échappées et compilées

Vous voudrez peut-être échapper à une valeur en pourcentage, mais allez-y et évaluez quelque chose sur la compilation :

Entrée LESS

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

Sortie CSS

div > span {
  width: calc((100% - 10px) - 80px);
}

Fuente: http://lesscss.org/functions/#string-functions-escape .

Answer 2

Je pense width: -moz-calc(25% - 1em); est ce que vous recherchez. Et vous pourriez vouloir donner à cette Lien un regard pour toute aide supplémentaire

Answer 3

Ou bien, vous pouvez utiliser l'attribut margin comme ceci :

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }

Answer 4

Essayez ceci :

width:auto;
margin-right:50px;