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

Question

我正在尝试实施一个蜘蛛图＆＃34;或者＆＃34;思维导图＆＃34;在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>

由于包装器的宽度是恒定的，因此无论浏览器窗口大小如何，内部元素都将保持在相同的位置。