我正在尝试将图片对齐到我网页上googlemaps的右侧,我尝试过对齐="对",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>
答案 0 :(得分:1)
您可以在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>
答案 1 :(得分:0)
尝试使用span,而不是div为第二个div
<span class="col-sm-3" style="float:left">
<img src="layout.jpg" style = "text-align: right;">
</span>
答案 2 :(得分:0)
有很多方法可以做到这一点,我用浮动创建了一个小提琴。但是,与您的想法相反......我正在使用float: left;
。我创建了<div>
以包含<iframe>
和<div>
以包含<img>
。我将<iframe>
和<img>
都设置为width: 100%;
,以便填充各自的容器。这样,无论您为外部容器设置的宽度如何,它们都会相应地填充它们。看看小提琴: