Question

我有一张地图的图片，我想将地址添加到它的右侧，我似乎无法弄明白。任何人都可以提供帮助，这是我使用的编码的一部分：

<div id="main">
<span style="margin-top:5px;
        margin-left:5px;
              text-align:right;">
       <h1 align="center" style="font-size:40px;"><span style="color:red;">Contact</span><span style="color:#FFFFFF;"> Us</span></h1>

  <img id="map" src="images/map.png" title="Image of Map for Krazie Needles." align="centre" />
<p align="left" style="margin-left:5px;
          margin-top: 5px;">
    45 Station Road

使用css代码

       #main
{

    margin-top:42px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    background:rgba(16,16,17,0.70);
    height:85%;
    width:90%;
    box-shadow: 3px 3px 2.5px #888888;
    border-radius:5px;
}   

img#map
{
    margin-left:5px;
    border-radius:5px;
    border-style:solid;
    border-width:2px;
    border-color:#FFFFFF;
}

我想对齐＆lt; p>标签旁边的标签。

Answer 1

您可以在图片代码上使用float: left;（请参阅float at W3.org），或将图片放在<p>内。

Answer 2

我想这就是你要找的东西。 The Fiddle

我试图保持您的样式，但已删除所有内联样式。

HTML

<div id="main">
    <h1><span class=red>Contact</span> Us</h1>
    <img class=map src="http://lorempixel.com/200/200" title="Image of Map for Krazie Needles." />
    <p class=address>45 Station Road</p>
</div>

CSS

#main
{
    margin: 42px auto;
    position:relative;
    background:rgba(16,16,17,0.70);
    width:90%;
    box-shadow: 3px 3px 2.5px #888888;
    border-radius:5px;
}   

h1 {
    text-align: center;
    color: #fff;
    font-size: 2em;
}

.red {
    color: red;
}

.map
{
    display:inline;
    margin: 0 5px 0;
    border-radius:5px;
    border-style:solid;
    border-width:2px;
    border-color:#fff;
}

.address {
    display:inline;
    vertical-align: top;
}

Answer 3

在img标记中，将（不正确的）align="centre"更改为align="left"。

（注意，img标签上没有中心属性。）

Answer 4

您应该将 float：left 添加到图片css。如果您想将地址放在地图上，则必须将 position：absolute 添加到地址为css的段落中。

图像对齐<p>标记</p>

4 个答案:

HTML

CSS