如何将图标与内容右侧对齐

Question

我在DIV中有一些内容。我想在右侧添加一个图像图标，但不要按下它下面的其余内容。

这是我的HTML：

<div id="subpageFooter">
    <div id="subpageFooterLeft">
          <div style="z-index: 15; position: relative; left: 0; padding-left: 20px; padding-top: 30px; font-weight: bold; color: #00A0BE; font-size: 13px;">
                Administrative Office
          </div>
          <div style="z-index: 14; position: relative; left: 0; padding-left: 40px; padding-top: 10px; padding-right: 8px; font-weight: normal; color: #000000; font-size: 12px;">
                1250 Avenue, Purchase, NY 36253-2547<br>
                972.656.0700<br>
          </div>
          <img style="position: relative; display: inline-block; left: 80%; margin-right: 15px; width: 52px; height: 51px;" src="theImages/locateit.png" title="Locate Administrative Office" alt="LocateAdministrative Office" />
    </div>
</div>

这是我的CSS：

#subpageFooter {
    position: relative;
    width: 100%;
    height: 625px;
    background: url('../theImages/bg_90_w.png');
    /*box-shadow: 0 0 10px #FFFFFF;*/
}
#subpageFooterLeft {
    position: absolute;
    left: 0;
    float: left;
    width: 60%;
    height: 100%;
}

使用上面的代码，页面显示以下内容：

我真正想要的是：

另外，当我调整页面大小时，左侧的内容和右侧的图标在空间中的比例正确。

我该如何实现？

Answer 1

如果你稍微改变你的代码就行了。

<div id="subpageFooter">
<div id="subpageFooterLeft">
      <div style="z-index: 15; position: relative; left: 0; padding-left: 20px; padding-top: 30px; font-weight: bold; color: #00A0BE; font-size: 13px;">
            Administrative Office
          <img style="position: absolute; float: right; display: inline-block; left: 80%; margin-right: 15px; width: 52px; height: 51px;" src="theImages/locateit.png" title="Locate Administrative Office" alt="LocateAdministrative Office" />
      </div>
      <div style="z-index: 14; position: relative; left: 0; padding-left: 40px; padding-top: 10px; padding-right: 8px; font-weight: normal; color: #000000; font-size: 12px;">
            1250 Avenue, Purchase, NY 36253-2547<br>
            972.656.0700<br>
      </div>
</div>
</div>

工作小提琴：

http://jsfiddle.net/nbx7F/

Answer 2

FIDDLE

将floats用于需要并排显示的divs。像：

<div class="clearfix">
    <div class="main-content float-l">Content 1</div>
    <div class="sidebar float-l">Content 2</div>
</div>

.float-l {
    float: left;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.main-content {
    width: 700px;
}

.sidebar {
    width: 260px;
}

同时浮动的两个div的总宽度不得超过可用空间的100％（包括边距，填充和边框）