javascript - html-CSS并排的相对布局

我的目的是显示具有400x400（canvas1）的原始画布，并使用50x50的小画布（canvas2）选择一个区域，然后将放大的结果显示到200x200的画布（canvas3）。我希望canvas2将随鼠标移动，但是canvas3保持在canvas1的右侧。

<!DOCTYPE HTML>
<html>
  <head>
  <style>
  .container {
position: relative;
border: 1px solid black;
  }
.inner {
    border:1px solid red;
    pointer-events: none;
    position: absolute;
}
    </style>
  </head>
  <body>
    <canvas id="canvas1" width="400" height="400" style="border:1px solid red;" onmousemove="onMouseMove(event,this);"></canvas>
    <div id="glass" class="inner">
        <canvas class="inner" id="canvas2" width=50 height=50 ></canvas>
        <div class="inner" style="top: 25px; left: 0px; width: 50px;"/>
        <div class="inner" style="top: -25px; left: 25px; height: 50px;"/>
    </div>
    <div id="zoomer" class="container">
        <canvas id="canvas3" class="inner" width=200 height=200 ></canvas>
        <div class="inner" style="top: 100px; left: 0px; width: 200px;"/>
        <div class="inner" style="top: -100px; left: 100px; height: 200px;"/>
    </div>
    <div class="container">
        <input id="browser" type='file' ></input>
    </div>

    <script>
    var glass = document.getElementById('glass');
    var canvas2 = document.getElementById('canvas2');
    var w = canvas2.width;
    var h = canvas2.height;

    function onMouseMove(event,thiz) {
       var x = event.offsetX;
        var y = event.offsetY;
        glass.style.left = (x - w/2) + 'px';
        glass.style.top = (y - h/2) + 'px';
    }
   </script>
  </body>
</html>

但是当前结果是：

如果鼠标移动，canvas2和canvas3将一起移动。
选择文件按钮与画布3重叠。

我希望只有canvas2（和十字线）可以用鼠标移动，但是canvas1，canvas3和选择文件按钮保持并排静态。

最佳答案

div语句不正确。
使用内联块显示模式。

用下面的html文件：

<!DOCTYPE HTML>
<html>
  <head>
  <style>
  .container {
display: inline-block;
vertical-align: top;
position: relative;
border: 1px solid black;
  }
.inner {
    border:1px solid red;
    pointer-events: none;
    position: absolute;
}
    </style>
  </head>
  <body>
    <canvas id="canvas1" width="400" height="400" style="border:1px solid red;" onmousemove="onMouseMove(event,this);"></canvas>
    <div id="glass" class="inner">
        <canvas class="inner" id="canvas2" width=50 height=50 ></canvas>
        <div class="inner" style="top: 25px; left: 0px; width: 50px;"></div>
        <div class="inner" style="top: 0px; left: 25px; height: 50px;"></div>
    </div>
    <div id="zoomer" class="container">
        <canvas id="canvas3" class="inner" width=200 height=200 ></canvas>
        <div class="inner" style="top: 100px; left: 0px; width: 200px;"></div>
        <div class="inner" style="top: 0px; left: 100px; height: 200px;"></div>
    </div>
    <input id="browser" type='file' ></input>

    <script>
    var glass = document.getElementById('glass');
    var canvas2 = document.getElementById('canvas2');
    var w = canvas2.width;
    var h = canvas2.height;

    function onMouseMove(event,thiz) {
       var x = event.offsetX;
        var y = event.offsetY;
        glass.style.left = (x - w/2) + 'px';
        glass.style.top = (y - h/2) + 'px';
    }
   </script>
  </body>
</html>

结果如下：