CSS中可以做數學嗎？

我有jquery accorion id #accordion和頭文件類名裏面的一些內容.simpleColor。現在我想給.simpleColor一個計算好的餘量。在僞...它看起來像這樣，CSS中可以做數學嗎？

.simpleClass { 
    margin-left: ((#accordion.width/2) - (.simpleColor.width/2)); 
}

我打開使用任何其他技術，如JavaScript來實現這一點，如果有可能的話。

來源

2012-04-30 doNotCheckMyBlog

這看起來像你想水平居中。你嘗試過'margin：0 auto;'？ – Ryan

您是否聽說過[calc（）]（http://www.w3.org/TR/css3-values/#calc0） – Musa

不可以......聽起來似乎很有幫助 – doNotCheckMyBlog

有一個稱爲calc一個CSS功能開始變得相當不錯的支持。語法的工作原理如下：

width: calc(50% - 100px);

（請注意，圍繞運營商的空白是顯著）

這使得CSS真正的動態計算支持。對於預處理器，只能將靜態長度與靜態長度相結合，並將相對長度與相對長度相結合。

自Chrome 19，Firefox 4和IE9以來，支持Calc。該功能沒有得到廣泛的支持，無法廣泛使用，但它不會太過於遙遠，它是值得記住和期待的。

來源

2013-05-29 03:26:08 TimE

正如你在Win7和8上提到的那樣，在Chrome，Firefox和IE中完美地工作。謝謝！獲得填充和100％寬度的div已經非常痛苦，並且使用JavaScript這麼簡單的東西看起來像是浪費。這太好了！ –

您也可以考慮['box-sizing：border-box;']（http://www.paulirish.com/2012/box-sizing-border-box-ftw/）。這使得填充從寬度減去而不是增加它，並且它比calc更好的支持，返回到IE8，並且有一個[polyfill可用於IE6/7]（https://github.com/Schepp/box-sizing- polyfill）如果需要支持。 IE8的市場份額仍然很大，所以我建議您使用「box-sizing」來滿足您的需求。 – TimE

你做了滴答:)謝謝 –

如果你打開使用其他技術，儘量少用：http://lesscss.org/

來源

2012-04-30 03:57:32

Spot on！謝謝邁克爾 – doNotCheckMyBlog

jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width()/2) - (jQuery('.simpleColor').width()/2) + 'px');

應該做你想要什麼。但是你需要在javascript中做這樣的事情，除非事先知道#accordian和.simpleColor的寬度（並且因此提前計算），否則你不能在純CSS中執行此操作。

來源

2012-04-30 04:00:58

不可能在本地執行CSS內部的數學運算。您可以使用JavaScript在頁面加載時更改CSS屬性，但這是一個痛苦，必須在每頁加載時完成，從而使頁面變慢。

您需要使用CSS預處理器，如LESS,Stylus或SASS。

使用這兩種語言之一的好處是您可以從中生成實際的CSS樣式表。您還可以獲得諸如函數，混入，變量等等的好處。

來源

2012-04-30 04:01:04

現貨，我得到了我需要的，但我想接受邁克爾的答案，因爲他首先指出:)謝謝btw – doNotCheckMyBlog

我相信CSS應該是純粹的樣式定義。我不喜歡混合一些計算。我會做，在我的JavaScript

var accWidth=parseInt($("#accordion").css("width").replace("px","")); 
var simpWidth=parseInt($(".simpleColor").css("width").replace("px","")); 
var marginLeft=((accWidth/2)-(simpWidth/2));  
$(".simpleClass").css("margin-left",marginLeft);

工作樣本http://jsfiddle.net/mzTRw/19/

來源

2012-04-30 04:08:06 Shyju

而不是parseInt（$（「＃accordion」）.css（「width」）。replace 「px」，「」））你可以使用$（「＃accordion」）.width（）來獲得整數值。 –

看到這個例子..他在CSS中使用了很多數學。

http://codepen.io/schoenwaldnils/pen/DLiyr

來源

2014-01-28 07:50:26

請注意，[鏈接只回答]（http://meta.stackoverflow.com/tags/link-only-answers/info）是不鼓勵，所以答案應該是最終的尋找一個解決方案（而不是另一個參考中途停留，這往往會隨着時間的推移變得陳舊）。請考慮在此添加獨立的摘要，並將鏈接保留爲參考。 – kleopatra

嘿！這是SCSS！不是CSS。編譯器會計算隊友 – 2016-07-22 04:32:57

CSS中可以做數學嗎？

回答

相關問題