我想要这个结果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>