Czy operacja numeryczna jest dozwolona w CSS?

Question

Na przykład, czy width: 50% + 10px; jest legalny w CSS?

Jeśli nie, jak obejść ten problem? Pracuję nad elementami pływającymi z wieloma kolumnami, szerokość między każdą kolumną wynosi 10 pikseli. Potrzebuję więc dynamicznej kalkulacji szerokości, aby obejść rozmiar ekranu.

Answer 1

Nie. Jeśli chcesz matematyki w CSS, spójrz na SASS lub LESS.

A jeśli zamierzasz używać LESS (lub SASS), a chcesz mieć równomiernie rozmieszczone kolumny, Bootstrap responsive brzmi jak to, czego potrzebujesz.

Answer 2

Można spróbować calc

selector{ 
    width: -moz-calc(50% + 10px); 
    width: -webkit-calc(50% + 10px); 
    width: calc(50% + 10px); 
} 

Answer 3

Zobacz ten poprzedni post: Is it possible to do mathematics inside CSS?

nie jest możliwe bezpośrednio z CSS. Ale można użyć np. LESS. Albo możesz użyć javascript, aby zrobić to dynamicznie.

Ale ponieważ ma to na celu obliczenie ekranu, więc lepiej przyjrzyj się, jaki jest odpowiedni projekt. Istnieje już wiele ram dla tego. Nie powiedziałbym, że jeden jest lepszy od innych tutaj. Ale spójrz na http://designpin.co/5-responsive-web-design-frameworks/

Zobacz, co pasuje do twoich potrzeb.

Answer 4

Brzmi jak to, czego naprawdę potrzebujesz, to margines:

Jeśli nie, jak obejść ten problem? Pracuję nad elementami pływającymi z wieloma kolumnami, szerokość między każdą kolumną wynosi 10 pikseli. Potrzebuję więc dynamicznej kalkulacji szerokości, aby obejść rozmiar ekranu.

.colItem { float: left; margin-right: 10px; } 

Twój szerokość prawdopodobnie nie powinno być w rzeczywistości 50% w tym przypadku, jak dwie kolumny siedzi obok siebie będzie rune wszystko (50% + 50% + margines 20px> 100%). Możesz nie chcieć 10px, ale 1% lub coś podobnego.

Lepszym rozwiązaniem, prawdopodobnie jest użycie wyściółkę z właściwością skrzynkowej wielkości:

.colItem 
{ 
    float: left; 
    width: 50%; 
    box-sizing: border-box; 
    -moz-box-sizing:border-box; 
    padding-right: 10px; 
} 
.colItem.last 
{ 
    padding-right: 0px; 
}