如何在html中水平水平顯示div？

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

HTML5不支持 align屬性，而是可以使用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

 .img-zoom-container { display: inline; } 

 <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> 

Answer 3

請檢查此小提琴（此處附有解決方案）： https : //jsfiddle.net/3uw7dnob/2/

您可以給屬性“ float：right”，而我給出了一個左右塊的例子。 通過此技巧，您始終可以並排放置兩個塊。

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