使用纯 JS 计算布局答案

【问题标题】：Calculating layout using pure JS使用纯 JS 计算布局
【发布时间】：2016-08-21 10:13:55
【问题描述】：

我可以有一个对象代表具有样式的页面元素：

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

如何通过这些算法http://taligarsiel.com/Projects/howbrowserswork1.htm#layout在不使用浏览器DOM的情况下计算这些元素位置的坐标和大小？所以我看到的结果类似于：

[{
   "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 ，但只支持“flex-box”布局。

【问题讨论】：

标签： javascript css algorithm layout

【解决方案1】：

它是“quiet simple”，尽管您想从头开始构建CSS Box Model。即使是系列中的this entry point 也可能会有所帮助

【讨论】：