Question

我有一张地图的图像，然后是一些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默认为块元素。 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>

Answer 2

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

John

Answer 3

请检查这个小提琴（此处附带的解决方案）：https://jsfiddle.net/3uw7dnob/2/

你可以赋予属性“float：right”，我给出了一个左右块的例子。你可以通过这个技巧并排放置两个区块。

.left-block {
  width: 100px;
  float: left;
}
.right-block {
  margin-left: 120px;
}

如何在html中水平显示div？

3 个答案: