html - Canvas 和漂浮

我正在一个包含标题，导航栏和其下的容器的布局。在容器内，我想向左浮动一个方向按钮，将边距设置为auto的画布浮动，然后向右浮动另一个方向按钮。

我遇到的问题是方向按钮位于画布下方。有足够多的水平空间可以将它们并排放置在容器中，因此我想知道是否由画布负责。 （容器的宽度为985px，每个方向按钮的宽度为86px，画布的宽度为675px。）

谁能告诉我为什么会这样或为我指明正确的方向？请？

HTML5：

<div id="container">
<a href="#" id="LftButton"><img src="imageFiles/arrowButtonLft.png" /></a>
<div id="canvasWrapper">
<canvas id="myCanvas" width="675" height="600"><p>Your browser doesn't support canvas.</p></canvas>
<script src="aboutMeScript.js" type="text/javascript"></script>
</div>
<a href="#" id="RtButton"><img src="imageFiles/arrowButtonRt.png" /></a>
</div>

CSS：

body{
background-image:url(imageFiles/bubsAndSqs_clip2_02062012.png);
background-color:#000;}
#myCanvas{
width:675px;
height:600px;
float:left;}
#canvasWrapper{
width:675px;
height:600px;
margin:auto;}
#RtButton{
float:right;}
#LftButton{float:left;}

最佳答案

一种解决方法是将#RtButton移到HTML中#LftButton之后：

<div id="container">
    <a href="#" id="LftButton"><img src="imageFiles/arrowButtonLft.png" /></a>
    <a href="#" id="RtButton"><img src="imageFiles/arrowButtonRt.png" /></a>
    <div id="canvasWrapper">
        <canvas id="myCanvas" width="675" height="600"><p>Your browser doesn't support canvas.</p></canvas>
        <script src="aboutMeScript.js" type="text/javascript"></script>
    </div>
</div>

关于html - Canvas 和漂浮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9199450/