将网页上的图片对齐 google 地图的右侧

Question

我试图在网页上将图片对齐到我的 googlemaps 的右侧，我试过 align="right", style = "text-align: right;" 但它要么将图片放在googlemaps 或将其放在下方。我试过将它们都放在里面并尝试创建单独的任何想法？我的代码如下

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

Answer 1

您可以在 div 标签上使用样式 float:left。

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

Answer 2

第二个 div

尝试使用 span 而不是 div

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

Answer 3

有很多方法可以做到这一点，我使用浮点数创建了一个 fiddle。但是，与您的想法相反...我正在使用 float: left;。我创建了一个 <div> 来包含 <iframe> 和一个 <div> 来包含 <img>。我将 <iframe> 和 <img> 都设置为 width: 100%; 以便它们填充各自的容器。这样，无论您为外部容器设置的宽度是多少，它们都会响应地填充它们。查看 fiddle：

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

将网页上的图片对齐 google 地图的右侧

Align picture on webpage to the right of google maps

html

css

webpage