Question

我想要这个结果Demo

而不是Demo

如何将div menu移至div Container的右侧，因此菜单位于右侧。我不想要position absolute，因为当您更改窗口页面的宽度大小时，菜单将隐藏图像背景Frog + Snake的背景。

非常感谢。

代码：

<!DOCTYPE HTML>
<html>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <title> - jsFiddle demo</title>
   <style type='text/css'>
      body {
      background-color : black;
      background-image : url('pic/bg1.png');
      background-size : 100% 700px;
      background-repeat : no-repeat;
      margin : 0;
      margin-left : -100px;
      padding : 0;
      }
      .imageContainer {
      position : relative;
      margin-left : auto;
      margin-right : auto;
      top : 10px;
      background-size : 1000px 500px;
      width : 1000px;
      height : 500px;
      overflow : hidden;
      }
      #Container {
      background-image : url('pic/1/3.jpg');
      background-repeat : no-repeat;
      z-index : 0;
      }
      .layer {
      position : absolute;
      width : 1000px;
      height : 500px;
      padding : 0;
      margin : 0;
      }
      #parrot {
      z-index : 5;
      }
      #frog_snake {
      z-index : 4;
      }
      #fly {
      z-index : 3;
      }
      #crok {
      z-index : 2;
      }
      #leafvarible {
      position : absolute;
      padding : 0;
      margin-left : auto;
      margin-right : auto;
      display : block;
      top : 10px;
      left : 100px;
      width : 1px;
      height : 1px;
      z-index : -1;
      }
      #pos {
      top : 50px;
      left : 10px;
      color : white;
      font-size : 16px;
      }
      #status {
      position : absolute;
      top : 350px;
      left : -100px;
      color : pink;
      font-size : 20px;
      padding-left : 120px;
      }
      #status1 {
      position : absolute;
      top : 375px;
      left : -100px;
      color : pink;
      font-size : 20px;
      padding-left : 120px;
      }
      #status2 {
      position : absolute;
      top : 400px;
      left : -100px;
      color : red;
      font-size : 20px;
      padding-left : 120px;
      }
      #fps_count {
      position : absolute;
      top : 10px;
      right : 10px;
      width : 150px;
      font-size : 20px;
      color : white;
      font-family : 'Happy Sans', cursive;
      border : red solid 1px;
      }
      #loading {
      background : blue;
      background-image : url('pic/FrogGameBackGround.jpg');
      background-repeat : no-repeat;
      background-size : 1000px 500px;
      z-index : 10;
      }
      #loading > #barCont {
      width : 400px;
      height : 20px;
      position : absolute;
      top : 300px;
      left : 50%;
      margin : -10px 0 0 -200px;
      background : black;
      }
      #loading > p {
      position : absolute;
      top : 275px;
      left : 50%;
      z-index : 11;
      }
      #bar {
      width : 0;
      height : 20px;
      position : absolute;
      left : 0;
      background : #F3FF67;
      }
      #menu {
      float : left;
      width : 200px;
      height : 500px;
      position : relative;
      left : 10px;
      top : 0;
      background-image : url('pic/menu.png');
      border : red solid 1px;
      clear : both;
      }
      #StartButton {
      position : absolute;
      right : 25px;
      top : 300px;
      width : 200px;
      text-align : center;
      color : white;
      font-size : 35px;
      text-shadow : 4px 4px 4px black;
      cursor : pointer;
      }
      #speaker {
      position : absolute;
      right : 150px;
      top : 350px;
      width : 50px;
      }
   </style>
   </head>
   <body>
      <div  id= "Container">
         <canvas id="A1" class="layer"></canvas>
         <canvas id="A2" class="layer"></canvas>
         <canvas id="A3" class="layer"></canvas>
         <canvas id="A4" class="layer"></canvas>
      </div>
      <div class="imageContainer" id="loading">
         <p id="loadText">Loading...</p>
         <div id="barCont">
            <div id="bar"></div>
         </div>
      </div>
      <canvas id="A5"></canvas>
      <div id="menu">
         <!-- Button Start Game -->
         <input id="StartButton" type="button" value="Start Game"/>
         <!-- Loading sounds -->
         <div id="speaker">speaker</div>
      </div>
      <script></script>
   </body>
</html>

Answer 1

使用position relative而不是absolute，并使用float:right;和/或float:left; 在主页面和菜单上。还有什么是A5的东西？

Answer 2

从#menu中删除所有头寸属性，并将其设置为display:flex;，然后添加以下边距margin:0 0 0 auto;。无论屏幕大小是多少，这都将使菜单与右侧对齐。

如何使用float left将div移动到右侧？

2 个答案: