“我正在为一家公司编写网站代码,他们希望公司的工作时间出现在主页上。”我在网站上添加了一个地图,但是不知道如何在地图的右边直接添加文本。我已经尝试了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
发布于 2018-07-11 04:58:52
我们需要看到一些代码。这听起来像是一个CSS问题。你是在使用样式表,还是仅仅对你的样式进行内联编码?您添加的文本会发生什么情况?它是隐藏在地图后面还是被推送到页面上的其他地方?你缺少了很多必要的信息来帮助你,这可能就是为什么你被否决的原因。您是否尝试过在页面上单击鼠标右键并检查它,以查看它在做什么?如果网站是直播的,或者你正在以任何方式广播页面,我可能会把它弄清楚。
发布于 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>
发布于 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>
https://stackoverflow.com/questions/51273674
复制相似问题