我已经编写了一些代码来尝试在 div 的左侧放置一个带有一些文本和按钮的谷歌地图 iframe，在页脚内，同时尝试使地图和文本响应。
我真的遇到了麻烦。任何人都可以提出任何建议吗？
这是我的 HTML 代码：
.map iframe {
align: left;
position: relative;
width: 100%;
padding-top: 75%;
}
.map .openning {
right: 0;
float: right;
text-align: left;
}<div class="ftr center">
<div class="map left">
<iframe src="URL HERE" style="border:none;"></iframe>
<div class="openning">
<h3>Opening Times</h3>
<div id="days">
<h4>Mon-Fri:</h4>
<h5>00:00 - 00:00</h5>
<h4>Sat-Sun:</h4>
<h5>00:00 - 00:00</h5>
</div>
<button id="donate" class="btn pink small">Donate now</button>
</div>
</div>
</div>忘记所有的权利，浮动和文本对齐，您正在混合不同的功能，这些功能彼此无关。相反，我建议使用 flexbox，这让一切变得非常简单。将父级设置为 display: flex 并使子级宽度为 50%。
.flex {
display: flex;
}
.flex > * {
width: 50%;
}<div class="flex">
<iframe src="https://example.com" style="border:none;"></iframe>
<div class="right">
<h3>Opening Times</h3>
<div id="days">
<h4>Mon-Fri:</h4><h5>00:00 - 00:00</h5><h4>Sat-Sun:</h4><h5>00:00 - 00:00</h5>
</div>
<button id="donate" class="btn pink small">Donate now</button>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句