如何解决当文本旁边有文字时,我的地图正在缩小?? HTML/CSS
所以我有一段文字漂浮在地图旁边。出于某种原因,地图缩小了,就像我在它应该是 70% 时添加了填充或边距一样。 有人可以帮忙吗?这是代码..
body{
background-color: lightblue;
}
.footer #map{
float: left;
}
.footer p{
background: transparent;
}
.footer{
height: auto;
width: auto;
padding: 40px 10% 0 10%;
font-size: 21px;
}
.footer iframe{
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="footer">
<div id="map">
<iframe width='70%' height='400px' id='mapcanvas' src='https://maps.google.com/maps?q=tomislavova%20ulica%20zagreb%20hrvatska&t=&z=10&ie=UTF8&iwloc=&output=embed' frameborder='0' scrolling='no' marginheight='0' marginwidth='0'><div class="zxos8_gm"><a href="https://downloadyou.tube/download/windows/">Windows version for Youtube</a></div><div style='overflow:hidden;'><div id='gmap_canvas' style='height:100%;width:100%;'></div></div><div><small>Powered by <a href="https://www.embedgooglemap.co.uk">Embed Google Map</a></small></div></iframe>
</div>
<p>Location and Contact Information<br>Working hours<br>MON - THU: 08.00 - 17.00</p>
</div>
</body>
</html>
解决方法
body{
background-color: lightblue;
}
.footer #map{
float: left;
display:flex;
width:100%;
}
.footer #map p{
background: transparent;
display: inline-block;
width: 29%;
padding: 0 10px;
margin: 0;
}
.footer{
height: auto;
width: auto;
padding: 40px 10% 0 10%;
font-size: 21px;
}
.footer iframe{
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="footer">
<div id="map">
<iframe width='70%' height='400px' id='mapcanvas' src='https://maps.google.com/maps?q=tomislavova%20ulica%20zagreb%20hrvatska&t=&z=10&ie=UTF8&iwloc=&output=embed' frameborder='0' scrolling='no' marginheight='0' marginwidth='0'><div class="zxos8_gm"><a href="https://downloadyou.tube/download/windows/">Windows version for Youtube</a></div><div style='overflow:hidden;'><div id='gmap_canvas' style='height:100%;width:100%;'></div></div><div><small>Powered by <a href="https://www.embedgooglemap.co.uk">Embed Google Map</a></small></div></iframe>
<p>Location and Contact Information<br>Working hours<br>MON - THU: 08.00 - 17.00</p>
</div>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。