Html 将网页上的图片与谷歌地图右侧对齐
我试图将一张图片对齐到网页上谷歌地图的右侧,我尝试了align=“right”,style=“text align:right;”但它要么将图片放在谷歌地图的左侧,要么将图片放在其下方。我试着把它们都放进去,试着创造出不同的想法?下面是我的代码Html 将网页上的图片与谷歌地图右侧对齐,html,css,webpage,Html,Css,Webpage,我试图将一张图片对齐到网页上谷歌地图的右侧,我尝试了align=“right”,style=“text align:right;”但它要么将图片放在谷歌地图的左侧,要么将图片放在其下方。我试着把它们都放进去,试着创造出不同的想法?下面是我的代码 <div> <h4>Location</h4> <iframe src="https://www.google.com/maps/embed? pb=!1m18!1m12!1m3!
<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>
地方
您可以在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>
地方
尝试使用span,而不是div作为第二个div
<span class="col-sm-3" style="float:left">
<img src="layout.jpg" style = "text-align: right;">
</span>
有很多方法可以做到这一点,我使用浮动创建了一个小提琴。然而,与你的想法相反。。。我正在使用
float:left代码>。我创建了一个
来包含
和一个
来包含
。我将
和
设置为宽度:100%代码>这样它们就可以填充各自的容器。这样,无论您为外部容器设置了什么宽度,它们都会相应地填充。看看小提琴:
谢谢这帮了大忙!由于我有一个新的堆栈溢出帐户,它将不允许我标记有用的答案。