計算使用純JS

佈局可能我有一個對象代表與風格的頁面元素：計算使用純JS

[{ 
    id: "widget-1", 
    display: "block", 
    float: "left", 
    width: 100 
}, { 
    id: "widget-2", 
    display: "block", 
    float: "right", 
    width: 200 
}]

如何計算這些元素位置的座標和尺寸，而無需使用瀏覽器的DOM這些算法http://taligarsiel.com/Projects/howbrowserswork1.htm#layout？所以我看到類似的結果：

[{ 
    "id": "widget-1", 
    "width": 200, 
    "height": 20, 
    "top": 0, 
    "left": 0, 
    "right": 200, 
    "bottom": 0, 
}, { 
    "id": "widget-2", 
    "width": 200, 
    "height": 20, 
    "top": 0, 
    "left": 200, 
    "right": 0, 
    "bottom": 0, 
}]

是否有這樣的庫？我需要在瀏覽器中對此進行快速計算，因此，JavaScript實現將很有用。

我看到我們有https://github.com/facebook/css-layout，但只支持「彈性盒」佈局。

來源

2016-04-27 Dmitry Yaremenko