將網頁上的圖片對齊到谷歌地圖的右側

我試圖在網頁上將我的google地圖右側的圖片對齊，我試過align =「right」，style =「text-align：right;」但它要麼將圖片放在Google地圖的左側，要麼放在下面。我試圖把它們都放在裏面，並嘗試創建單獨的任何想法？我下面將網頁上的圖片對齊到谷歌地圖的右側

<div> 
     <h4>Location</h4> 
     <iframe src="https://www.google.com/maps/embed? 
pb=!1m18!1m12!1m3!1d3286.997240714081!2d-84.00061768469592!3d34.52829788047906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x885f6619cc5057df%3A0xb04a3ff6aa138ebf!2sUniversity+Heights+Apartments!5e0!3m2!1sen!2sus!4v1497451987538" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> 
</div> 
     <div class="col-sm-3"> 
     <img src="layout.jpg" style = "text-align: right;"> 
     </div>

來源

2017-06-14 caseyprogramming

有很多方法可以做到這一點，我創建了使用浮動小提琴。但是，與您可能認爲的相反......我正在使用float: left;。我創建了一個<div>以包含和<div>以包含<img>。我將和<img>設置爲width: 100%;，以便它們填充它們各自的容器。這樣，無論您爲外部容器設置的寬度如何，他們都會以相應的方式填充它們。看看小提琴：

https://jsfiddle.net/fushniki/9cn3ptok/

來源

2017-06-15 00:18:50 Fushniki

感謝這幫了很多！因爲我有一個新的堆棧溢出帳戶，它不會允許我標記有用的答案。 – caseyprogramming

代碼，你可以使用樣式float:left您div標籤。

<div style="float:left"> 
    <h4>Location</h4> 
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3286.997240714081!2d-84.00061768469592!3d34.52829788047906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x885f6619cc5057df%3A0xb04a3ff6aa138ebf!2sUniversity+Heights+Apartments!5e0!3m2!1sen!2sus!4v1497451987538" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> 
</div> 
<div class="col-sm-3"> 
    <img src="layout.jpg"> 
</div>

來源

2017-06-14 23:47:01

嘗試使用範圍，而不是DIV的第二格

<span class="col-sm-3" style="float:left"> 
     <img src="layout.jpg" style = "text-align: right;"> 
    </span>

來源

2017-06-14 23:52:50

將網頁上的圖片對齊到谷歌地圖的右側

回答

相關問題