javascript - 如何在html中水平显示div？

Question

我有一张 map 图像，然后是一些 javascript，当您将鼠标悬停在它上面时允许放大，我想在原始图像的右侧显示放大部分，但它目前出现在它下面。我试过 align=right 但它实际上不是一个图像它是一个容器所以没有用。这是我的代码；

<div class="img-zoom-container">
  <img id="myimage" src="Images/Calderpark Shopping centre map.jpg" width="600">
  <hr><div id="myresult" align=right class="img-zoom-result"> </div></hr>
</div>

Answer 1

align 属性HTML5 不支持，您可以使用 CSS 实现同样的效果。

此外，div 默认是一个block 元素。 align 属性仅适用于 inline 元素。

display: flex 是您在 CSS 中所需要的。

.horizontal-container{
  display:flex;
}
.zoomed-map{
  flex-grow:1;
}

<div class="horizontal-container">
  <div class='actual-map'>
    <img id="myimage" src="https://picsum.photos/200" width="200">
  </div>
  <div class='zoomed-map'>
    zoomed container
  </div>
</div>