html - 调整浏览器大小时 Div 永久定位

Question

所以我的目标是，将这个 div 背景框定位为“浅灰色”，文本位于另一个 div 中，但每次我按照我想要的方式定位 div 时，它们似乎被抵消了，我在想创建 @media_query 但我觉得我必须创建太多的语句才能对其进行相应的调整，如果有人有任何建议会很好。

<div style="width:200px; height:200px;right:0;margin-right:7%; border: 5px;
 solid:grey; background-color:lightgrey;position:absolute;">
</div>

<div style="position:absolute;right:0;margin-right:10%;">
    <h3>{{major_choice.0.Major}}</h3>
    <h3>Overall Rating:</h3>
    <h3>{{major_choice.0.ProfessorRating}}</h3>
</div>

第一张图片是一张 map 传单，它实现了我想要实现的目标，它本质上是在不丢失其位置的情况下动态改变大小，这与我创建的在调整屏幕大小时不断移动位置不同。

传单 map (我的目标):

第一张图片非常适合我想要的位置:

当我调整大小时会发生这种情况:

我没有太多的 css 经验，我现在正在上 web 开发课，但由于假期我无法见到我的教授，如果有人能给我一些建议我真的会不胜感激!

有什么建议吗？

html代码:https://pastebin.com/iTmsyV5Z

Answer 1

我真的不能得到一个完整的例子来测试，但像这样:

<div style="width: 200px; height:200px; border: 5px;
    solid:grey; background-color: lightgrey; float: left;">
</div>

<div style="margin-left:10%; float: left;">
    <h3>{{major_choice.0.Major}}</h3>
    <h3>Overall Rating:</h3>
    <h3>{{major_choice.0.ProfessorRating}}</h3>
</div>

或

<div style="width: 200px; height:200px; border: 5px;
    solid:grey; background-color: lightgrey; float: left;">
</div>

<div style="margin-right:10%; float: right;">
    <h3>{{major_choice.0.Major}}</h3>
    <h3>Overall Rating:</h3>
    <h3>{{major_choice.0.ProfessorRating}}</h3>
</div>

应该在对值进行一些调整后工作。不确定您是希望灰色框一直向右还是向左。

我通过使用相对定位实现了这一点。并向左浮动两个元素，以便它们水平堆叠。我相信这就是您想要的。