当我的地图旁边有文字时，它正在缩小??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&amp;t=&amp;z=10&amp;ie=UTF8&amp;iwloc=&amp;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&amp;t=&amp;z=10&amp;ie=UTF8&amp;iwloc=&amp;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>

相关内容

最新更新

热门标签：