blocks|key|4134617|text|使用float:+right;使文本向右浮动。display:+inline-block还可以让元素并排排列。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4134618|​|4134619|div{
++display:+inline-block;
}|code-block|syntax|javascript|4134620|<div+style="width:+50%25;">Random+text.+Random+text.+Random+text.+Random+text.</div>
<div+style="width:+40%25;+float:+right;">
<b>Text+to+the+left.</b></div>|4134621|4134622|您还可以使用right:+0px;+(通过设置position属性使元素位于右侧)。|4134623|4134624|div{
++display:+inline-block;
}|4134625|<div+style="width:+50%25;">Random+text.+Random+text.+Random+text.+Random+text.</div>
<span+style="position:+absolute;+right:+0px;">
<b>Text+to+the+left.</b></span>|4134626|4134627|entityMap^0|2|D|N|L|0|0|0|0|0|6|B|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|R|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|J|7|1D|8|@]|D|@]|E|$K|L]]|$1|W|3|G|5|6|7|1E|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|Y|$]]

<p>Use <code>float: right;</code> to make text float to the right. <code>display: inline-block</code> also makes elements line up side by side.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div{
  display: inline-block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width: 50%;"&gt;Random text. Random text. Random text. Random text.&lt;/div&gt;
&lt;div style="width: 40%; float: right;"&gt;
&lt;b&gt;Text to the left.&lt;/b&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>You can also use <code>right: 0px;</code> (with the position property set to make an element stick to the right).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div{
  display: inline-block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width: 50%;"&gt;Random text. Random text. Random text. Random text.&lt;/div&gt;
&lt;span style="position: absolute; right: 0px;"&gt;
&lt;b&gt;Text to the left.&lt;/b&gt;&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4135037|text|我们需要看到一些代码。这听起来像是一个CSS问题。你是在使用样式表，还是仅仅对你的样式进行内联编码？您添加的文本会发生什么情况？它是隐藏在地图后面还是被推送到页面上的其他地方？你缺少了很多必要的信息来帮助你，这可能就是为什么你被否决的原因。您是否尝试过在页面上单击鼠标右键并检查它，以查看它在做什么？如果网站是直播的，或者你正在以任何方式广播页面，我可能会把它弄清楚。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4135038|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>We would need to see some code. This sounds like a CSS issue. Are you using a style sheet or just inline coding your styles? What happens to the text that you are adding? Does it get hidden behind the map or is it being pushed somewhere else on the page? You are missing a lot of essential information needed to assist with this, which may be why you got down-voted. Have you tried right-clicking on the page, and inspecting it to see what it's doing? If the site is live, or you are broadcasting the page in any way I could probably get it figured out.</p>


blocks|key|4134712|text|使用display:+absolute;并设置top和right属性(元素与页面顶部和右侧的距离)。使用max-width，这样iframe就不会与包含文本的div重叠。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4134713|​|4134714|<section+id+=+"map">
<div+class+=+"container">
<h2>Find+Us+Today!</h2>
<div+class="mapouter">
<div+class="gmap_canvas">
<iframe+style="width:80%25;"+height="570"+id="gmap_canvas"+
src="https://maps.google.com/maps?+
q=
5217%2520Dominion%2520Drive%2520Dublin%252C%2520VA%2520&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%25;+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>|code-block|syntax|javascript|4134715|4134716|entityMap^0|2|I|N|3|R|5|1G|9|1S|6|27|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|O|$]]

<p>Use <code>display: absolute;</code> and set <code>top</code> and <code>right</code> properties (how far away the element is from the top and the right of the page). Use <code>max-width</code> so the <code>iframe</code> does not overlap with the <code>div</code> with the text.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id = "map"&gt;
&lt;div class = "container"&gt;
&lt;h2&gt;Find Us Today!&lt;/h2&gt;
&lt;div class="mapouter"&gt;
&lt;div class="gmap_canvas"&gt;
&lt;iframe style="width:80%;" height="570" id="gmap_canvas" 
src="https://maps.google.com/maps? 
q=
5217%20Dominion%20Drive%20Dublin%2C%20VA%20&amp;t=&amp;z=13&amp;ie=UTF8&amp;iwloc=
&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" 
marginwidth="0"&gt;&lt;/iframe&gt;
&lt;a href="https://www.embedgooglemap.net"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;style = float.left&gt;.mapouter{text- 
align:right;height:500px;width:600px;}.gmap_canvas 
{overflow:hidden;background:none!important;height:600px;width:600px;} 
&lt;/style&gt;
&lt;/div&gt;
&lt;/section&gt;

&lt;section id = "contact"&gt;
&lt;div class = "container" style="position: absolute;right: 0;  top: 40px; max-width: 20%; overflow-wrap: break-word;"&gt;
&lt;h3&gt;XXXXXXXXXXXXXXXXXXXXX&lt;/h3&gt;
&lt;p&gt;5217 Dominion Drive &lt;br&gt;
  Dublin, Virginia, 24084&lt;br&gt;
  &lt;br&gt;

&lt;h3&gt;Contact Us&lt;/h3&gt;
&lt;p&gt;(540)-XXXXXXXX&lt;/p&gt;

&lt;h3&gt;Hours&lt;/h3&gt;
&lt;p&gt;Monday: 9AM to 5PM&lt;br&gt;
 Tuesday: 9AM to 5PM&lt;br&gt;
 Wednesday: 9AM to 5PM&lt;br&gt;
 Thursday: 9AM to 5PM&lt;br&gt;
 Friday: 9AM to 5PM&lt;br&gt;
 Saturday: 9AM to 5PM&lt;br&gt;
 Sunday: 9AM to 5PM&lt;br&gt;
 &lt;/p&gt;
 &lt;/div&gt;
 &lt;/section&gt;</code></pre>
</div>
</div>
</p>


<p>`I am coding a website for a company and they would like their company hours to be on the home page. I added a map to the site, but cannot figure out how to add text directly to the right of the map. I have tried several variations of float: right and float: left but nothing has worked. Thanks!</p>

<pre><code>&lt;section id = "map"&gt;
&lt;div class = "container"&gt;
&lt;h2&gt;Find Us Today!&lt;/h2&gt;
&lt;div class="mapouter"&gt;
&lt;div class="gmap_canvas"&gt;
&lt;iframe width="600" height="500" id="gmap_canvas" 
src="https://maps.google.com/maps? 
q=
5217%20Dominion%20Drive%20Dublin%2C%20VA%20&amp;t=&amp;z=13&amp;ie=UTF8&amp;iwloc=
&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" 
marginwidth="0"&gt;&lt;/iframe&gt;
&lt;a href="https://www.embedgooglemap.net"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;style = float.left&gt;.mapouter{text- 
align:right;height:500px;width:600px;}.gmap_canvas 
{overflow:hidden;background:none!important;height:500px;width:600px;} 
&lt;/style&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

&lt;section id = "contact"&gt;
&lt;div class = "container"&gt;
&lt;h3&gt;XXXXXXXXXXXXXXXXXXXXX&lt;/h3&gt;
&lt;p&gt;5217 Dominion Drive &lt;br&gt;
  Dublin, Virginia, 24084&lt;br&gt;
  &lt;br&gt;

&lt;h3&gt;Contact Us&lt;/h3&gt;
&lt;p&gt;(540)-XXXXXXXX&lt;/p&gt;

&lt;h3&gt;Hours&lt;/h3&gt;
&lt;p&gt;Monday: 9AM to 5PM&lt;br&gt;
 Tuesday: 9AM to 5PM&lt;br&gt;
 Wednesday: 9AM to 5PM&lt;br&gt;
 Thursday: 9AM to 5PM&lt;br&gt;
 Friday: 9AM to 5PM&lt;br&gt;
 Saturday: 9AM to 5PM&lt;br&gt;
 Sunday: 9AM to 5PM&lt;br&gt;
 &lt;/p&gt;
 &lt;/div&gt;
 &lt;/section&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/WYcCV.jpg" rel="nofollow noreferrer">I would like to add text to the right of the map with company hours and contact information</a></p>


How do I add text to the right of this map using HTML?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

“我正在为一家公司编写网站代码，他们希望公司的工作时间出现在主页上。”我在网站上添加了一个地图，但是不知道如何在地图的右边直接添加文本。我已经尝试了float的几个变体: right和float: left，但都不起作用。谢谢!<section id = "map"><div class = "container"><...

问如何使用HTML将文本添加到此地图的右侧？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用HTML将文本添加到此地图的右侧？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用HTML将文本添加到此地图的右侧？
EN