Question

我需要你的帮助！一直在寻找解决方案，但找不到一个，所以我想我应该问它。

对于学校项目，我需要将一个随机数量的大厅放在地图上的正确位置。作为一个例子，我只使用了4个大厅，刚刚硬编码了所有从带有Angular的JSON中获取的信息，如this CodePen中所示

<div class="hall" id="hall01" style="width:15%; padding-bottom:50%; left:00%; top:00%; background-color:red;"></div>
<div class="hall" id="hall02" style="width:85%; padding-bottom:20%; left:15%; top:00%; background-color:green;"></div>
<div class="hall" id="hall03" style="width:15%; padding-bottom:10%; left:85%; top:40%; background-color:yellow;"></div>
<div class="hall" id="hall04" style="width:85%; padding-bottom:20%; left:15%; top:60%; background-color:blue;"></div>

当页面调整大小时，我已经解决了调整大厅大小的问题。剩下的唯一问题是顶部的绝对定位不能正常工作。

所有内容的计算宽度均为1000像素，高度为500像素，但如果浏览器也调整大小，则应全部调整大小。

让父母调整到正确的高度也是我努力的事情。有人可以帮帮我吗？

Answer 1

问题是，在使用top属性时，百分比是根据height of the container计算的，而不是基于https://msdn.microsoft.com/en-us/library/office/ff837104.aspx的宽度。要解决此问题，请将top设置为0，然后使用margin-top: x%;。所有边距都是根据容器的宽度计算的，因此当调整窗口大小时，margin-top也会缩小。

响应式CSS绝对顶级位置

1 个答案: