Calcul de la largeur du pourcentage au pixel puis moins par pixel en moins CSS
Je vais calculer la largeur dans un élément du pourcentage au pixel, donc je vais moins-10px en utilisant LESS et calc () . Son possible?
div {
span {
width:calc(100% - 10px);
}
}
J'utilise CSS3 calc() donc ça ne marche pas: calc(100% - 10px)
Exemple:, si 100% = 500px donc, largeur = 490px (500-10);
J'ai fait une démo pour tester : http://jsfiddle.net/4DujZ/55/
Donc padding dira: 5 (10px / 2) tout le temps quand je redimensionne.
Puis-je le faire en moins ? Je sais comment faire dans jQuery et CSS simple comme le remplissage de marge ou bien... mais je vais essayer de faire fonctionnel dans de MOINS avec calc()
4 réponses
Vous pouvez échapper les arguments calc afin de les empêcher d'être évalués lors de la compilation.
En utilisant votre exemple, vous entoureriez simplement les arguments, comme ceci:
calc(~'100% - 10px')
Démonstration : http://jsfiddle.net/c5aq20b6/
, je trouve que je l'utiliser dans l'une des trois façons suivantes:
Échappement De Base
Tout ce qui se trouve dans les arguments calc est défini comme une chaîne, et est totalement statique jusqu'à ce qu'il soit évalué par client:
Moins D'entrée
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:
Moins D'entrée
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 de pourcentage, mais allez-y et évaluez quelque chose sur la compilation:
Moins D'entrée
@btnWidth: 40px;
div {
> span {
@pad: 10px;
width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
}
}
Sortie CSS
div > span {
width: calc((100% - 10px) - 80px);
}
Source: http://lesscss.org/functions/#string-functions-escape.
Je pense que width: -moz-calc(25% - 1em); est ce que vous cherchez.
Et vous pouvez donner à ce lien un regard pour toute aide supplémentaire
Ou, vous pouvez utiliser l'attribut margin comme ceci:
{
background:#222;
width:100%;
height:100px;
margin-left: 10px;
margin-right: 10px;
display:block;
}