Question

这是HTML代码

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

<html>
    <head>
        <title>Vegging Out</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" href="css/fooStyle.css"/>
        <link rel="stylesheet" href="css/jquery.mobile.icons.min.css"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css"/>
        <script src="js/jquery-2.2.0.min.js"></script>
        <!--<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script src="phonegap.js"></script>
    </head>
    <body>
        jQuery Mobile pages
        <script src="js/restaurantDatabase.js"></script>
    </body>
</html>

当我在较大分辨率（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;
}

Answer 2

right:0;似乎挡路了。它将容器一直拉到右侧，但也设置了最大宽度，因此它在设置的宽度的60％处停止。你的规则并不是一致的。

因为绝对，所以不需要显示。

除非我想念并且最大宽度挡路，否则......或者

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: