如何使用HTML将文本添加到此地图的右侧？
如何使用HTML将文本添加到此地图的右侧？
提问于 2018-07-11 04:48:22
“我正在为一家公司编写网站代码，他们希望公司的工作时间出现在主页上。”我在网站上添加了一个地图，但是不知道如何在地图的右边直接添加文本。我已经尝试了float的几个变体: right和float: left，但都不起作用。谢谢!
<section id = "map">
<div class = "container">
<h2>Find Us Today!</h2>
<div class="mapouter">
<div class="gmap_canvas">
<iframe width="600" height="500" id="gmap_canvas"
src="https://maps.google.com/maps?
q=
5217%20Dominion%20Drive%20Dublin%2C%20VA%20&t=&z=13&ie=UTF8&iwloc=
&output=embed" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0"></iframe>
<a href="https://www.embedgooglemap.net"></a>
</div>
<style = float.left>.mapouter{text-
align:right;height:500px;width:600px;}.gmap_canvas
{overflow:hidden;background:none!important;height:500px;width:600px;}
</style>
</div>
</div>
</section>
<section id = "contact">
<div class = "container">
<h3>XXXXXXXXXXXXXXXXXXXXX</h3>
<p>5217 Dominion Drive <br>
Dublin, Virginia, 24084<br>
<br>
<h3>Contact Us</h3>
<p>(540)-XXXXXXXX</p>
<h3>Hours</h3>
<p>Monday: 9AM to 5PM<br>
Tuesday: 9AM to 5PM<br>
Wednesday: 9AM to 5PM<br>
Thursday: 9AM to 5PM<br>
Friday: 9AM to 5PM<br>
Saturday: 9AM to 5PM<br>
Sunday: 9AM to 5PM<br>
</p>
</div>
</section>I would like to add text to the right of the map with company hours and contact information
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-11 04:58:52
我们需要看到一些代码。这听起来像是一个CSS问题。你是在使用样式表，还是仅仅对你的样式进行内联编码？您添加的文本会发生什么情况？它是隐藏在地图后面还是被推送到页面上的其他地方？你缺少了很多必要的信息来帮助你，这可能就是为什么你被否决的原因。您是否尝试过在页面上单击鼠标右键并检查它，以查看它在做什么？如果网站是直播的，或者你正在以任何方式广播页面，我可能会把它弄清楚。
Stack Overflow用户
发布于 2018-07-11 04:58:48
使用float: right;使文本向右浮动。display: inline-block还可以让元素并排排列。
div{
display: inline-block;
}<div style="width: 50%;">Random text. Random text. Random text. Random text.</div>
<div style="width: 40%; float: right;">
<b>Text to the left.</b></div>
您还可以使用right: 0px; (通过设置position属性使元素位于右侧)。
div{
display: inline-block;
}<div style="width: 50%;">Random text. Random text. Random text. Random text.</div>
<span style="position: absolute; right: 0px;">
<b>Text to the left.</b></span>
Stack Overflow用户
发布于 2018-07-11 05:19:54
使用display: absolute;并设置top和right属性(元素与页面顶部和右侧的距离)。使用max-width，这样iframe就不会与包含文本的div重叠。
<section id = "map">
<div class = "container">
<h2>Find Us Today!</h2>
<div class="mapouter">
<div class="gmap_canvas">
<iframe style="width:80%;" height="570" id="gmap_canvas"
src="https://maps.google.com/maps?
q=
5217%20Dominion%20Drive%20Dublin%2C%20VA%20&t=&z=13&ie=UTF8&iwloc=
&output=embed" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0"></iframe>
<a href="https://www.embedgooglemap.net"></a>
</div>
<style = float.left>.mapouter{text-
align:right;height:500px;width:600px;}.gmap_canvas
{overflow:hidden;background:none!important;height:600px;width:600px;}
</style>
</div>
</section>
<section id = "contact">
<div class = "container" style="position: absolute;right: 0; top: 40px; max-width: 20%; overflow-wrap: break-word;">
<h3>XXXXXXXXXXXXXXXXXXXXX</h3>
<p>5217 Dominion Drive <br>
Dublin, Virginia, 24084<br>
<br>
<h3>Contact Us</h3>
<p>(540)-XXXXXXXX</p>
<h3>Hours</h3>
<p>Monday: 9AM to 5PM<br>
Tuesday: 9AM to 5PM<br>
Wednesday: 9AM to 5PM<br>
Thursday: 9AM to 5PM<br>
Friday: 9AM to 5PM<br>
Saturday: 9AM to 5PM<br>
Sunday: 9AM to 5PM<br>
</p>
</div>
</section>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51273674
复制相关文章
相似问题