如何使用 CSS 将图像定位在最右侧？答案

【问题标题】：How can I use CSS to position an image on the rightmost side?如何使用 CSS 将图像定位在最右侧？
【发布时间】：2009-02-24 09:15:52
【问题描述】：

我有以下代码：我想要的是使用 css 将“MYIMAGE”放在最右侧。 alt text http://igurr.com/resized-image.ashx/__size/500x400/__key/CommunityServer.Components.PostAttachments/00.00.00.01.73/OneContact.JPG

<div style="cursor: pointer;" onclick="javascript:SelectContact('17');" onmouseover="javascript:this.className='onfocus';" onmouseout="javascript:this.className='tempClass';" id="contact_17" class="tempClass">
                <input type="checkbox" class="contactChk contactItem" id="chk_17" name="chkContact" onclick="javascript:alert('clicked');"/>
                <img height="25" width="25" class="contactItem" src="Images/Contacts/NoImage.gif" alt=""/>
                <span class="contactName" id="contactName_17">
                    Amr ElGarhy
                </span>
                <img id="MYIMAGE" src="Images/Common/Motiva.png" alt="" class="contactItem"/>
                <br/>
            </div>

CSS：

.contactChk {
margin-left:10px;
}
.contactItem {
display:inline;
vertical-align:middle;
}

.contactName {
display:inline;
vertical-align:middle;
}

【问题讨论】：

标签： html css xhtml

【解决方案1】：

另一种方法是使用绝对定位。

如果 #contact_17 是 position:relative，您可以将 #MYIMAGE 设置为 position:absolute 并将其 'right' 属性设置为 0（或者离您希望的右边缘有多远）。但是，绝对定位会忽略 div 中的任何其他内容，因此如果您这样做，请确保将其余内容设置为不重叠。

【讨论】：

好建议 - 在用户名长度未知的情况下，这可能会导致问题，所以要小心。 +1 是一个不错的选择：)

【解决方案2】：

试试：

img#MYIMAGE {
  float: right;
}

不确定这是否可行 - 这取决于 div#contact_17 的样式，这在您的问题中并不清楚。

【讨论】：

哈哈 - 鉴于有很多其他帖子告诉你同样的事情，我猜这应该可行！
当我给它时 float:right;它向右但向下，所以它似乎在另一行
hmmm...尝试将其他元素向左浮动（复选框、其他图像和跨度）

【解决方案3】：

直接浮起来

#MYIMAGE{
 float:right;
}

固定图像的宽度也是个好主意。

【讨论】：

【解决方案4】：

试试float:right;

【讨论】：