css - 使用 CSS 创建蜘蛛图/思维导图

Question

我正在尝试在 CSS 中实现“蜘蛛图”或“思维导图”。

本质上，我想要的是中央盒子周围的一圈盒子。

理想情况下，这些都只是 DIV，我可以根据需要向其中添加更多/更少的内容(并且希望使用 JS 进行操作)。它们不需要是可拖动的或类似的东西。

与图表不同，它们不需要从外部主题到思维导图名称的灰线等 - 我真的不介意这些。

首先，我真的不知道从哪里开始。我想我必须对每个盒子使用绝对定位？如果我的观众使用相同的分辨率和浏览器，那可能不会太糟糕，但情况并非总是如此。

所以，我真正的问题是，如何设置这样的 DIV，使其在不同的分辨率和不同的浏览器中保持在相同的位置？我可以在相对对齐的 DIV 中使用绝对定位吗？

我需要支持的浏览器主要是IE10、Chrome和Safari。所以我想我应该以 IE10 为基础进行设计？

提前致谢

Answer 1

创建固定宽度/高度的 div 并将其他 div 放在那里。

<div style='width: 1000px; height: 1000px; position: relative;'>
    <div class='note' style='position: absolute; left: 50px; top: 50px;'></div>
    <div class='note' style='position: absolute; left: 150px; top: 150px;'></div>
    <div class='note' style='position: absolute; left: 350px; top: 350px;'></div>
</div>

由于 wrapper 的宽度是恒定的，所以无论浏览器窗口大小如何，内部元素都会保持在相同的位置。