Hoạt động số có được phép trong CSS không?

Question

Ví dụ: width: 50% + 10px; hợp pháp trong CSS?

Nếu không, cách khắc phục sự cố này? Tôi đang làm việc trên các phần tử float với nhiều cột, chiều rộng giữa mỗi cột là 10px. Vì vậy, tôi cần một tính toán chiều rộng động để có được xung quanh kích thước màn hình.

Answer 1

Không. Nếu bạn muốn toán bằng CSS, hãy xem xét SASS hoặc LESS.

Và nếu bạn định sử dụng LESS (hoặc SASS) và bạn muốn các cột có khoảng cách đều nhau, Bootstrap responsive giống như những gì bạn cần.

Answer 2

Bạn có thể thử calc

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

Answer 3

Xem bài trước này: Is it possible to do mathematics inside CSS?

Nó là không thể trực tiếp từ CSS. Nhưng người ta có thể sử dụng, ví dụ, LESS. Hoặc bạn có thể sử dụng javascript để làm động.

Nhưng vì điều này là để tính toán màn hình, do đó, pleace hãy xem thiết kế mang tính resposive là gì. Đã có một số khung công tác cho việc này. Tôi sẽ không nói rằng một trong những tốt hơn so với những người khác ở đây .. Nhưng hãy xem http://designpin.co/5-responsive-web-design-frameworks/

Và xem điều gì phù hợp với nhu cầu của bạn.

Answer 4

Nghe có vẻ giống như những gì bạn thực sự cần là margin:

Nếu không, làm thế nào để có được xung quanh vấn đề này? Tôi đang làm việc trên các phần tử float với nhiều cột, chiều rộng giữa mỗi cột là 10px. Vì vậy, tôi cần một tính toán chiều rộng động để có được xung quanh kích thước màn hình.

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

chiều rộng của bạn có lẽ không nên thực sự là 50% trong trường hợp đó, như hai cột ngồi cạnh nhau sẽ rune tất cả mọi thứ (50% + 50% + 20px lề> 100%). Bạn có thể không thực sự muốn 10px, nhưng 1% hoặc một cái gì đó.

Một giải pháp tốt hơn, có lẽ, là sử dụng đệm với thuộc tính hộp-sizing:

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