javascript - 修复 div 在任何屏幕分辨率下的对齐方式

Question

这是HTML代码

    .Box {
      position: absolute;
      bottom: 60px;
      right: 0px;
      left: 65px;
      display: block;
      background-color: #fedd2d;
      max-width: 60%;
      padding: 15px;
      opacity: 0.8;
    }

<div class="Box">
  <div class="Boxtitle">Hello</div>
  <div class="Boxsubtitle">Subtitle</div>
</div>

当我以更大的分辨率 (2560*1440) 查看此框时，它会在右侧和左侧展开。我尝试使用 width 属性从右侧修复框，但固定宽度阻碍了响应能力，并且框宽度不会随着文本长度的变化而变化。我如何使用 CSS 或 Javascript 使这个 Box div 在任何屏幕尺寸下保持相同的位置，同时根据其中内容的长度使其响应？

Answer 1

只需要去掉right和max-width，宽度就会根据内容调整。

.Box {
    position: absolute;
    bottom: 60px;
    left: 65px;
    display: block;
    background-color: #fedd2d;
    padding: 15px;
    opacity: 0.8;
}