如何将 div 向右对齐？答案

【问题标题】：How to align a div to the right?如何将 div 向右对齐？
【发布时间】：2013-05-16 17:02:19
【问题描述】：

我想将位于另一个图像前面的图像向右对齐。

在这个例子中，小谷歌图片在左上角，但我希望它在右上角：

我已经尝试过 float: right 和 align="right" 但这确实有效。正如您在示例中看到的，背景是一个带有 svg 的对象，但对于这个示例，我只是在这个地方放了一张图片，我认为应该没有什么不同。

<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
    <div style="float:right;width:30px; height:30px;position: absolute; z-index:5000"><a href="javascript:goToLastNodeDiv()"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></a></div>
<!--background-->
    <div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
    <!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>

【问题讨论】：

标签： html position alignment

【解决方案1】：

添加（其中 20px 是图像的宽度）

right: 20px;

图片。据我所知，如果您使用绝对定位，这是唯一的方法

http://jsfiddle.net/2NYve/1/

【讨论】：

【解决方案2】：

<div style="z-index:10; position: relative; float:right;width:30px; height:30px; z-index:5000">
<a href="javascript:goToLastNodeDiv()"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" />
</a></div>

<div style="z-index:1; width:100%; position: absolute; z-index:100">
<img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
</div>

我添加到带有 chromo 徽标的 div 中：

z-index:10; position: relative;

还有另一个，带有 google 标志：

z-index:1

我使用了 CSS z-index 属性：http://www.w3schools.com/cssref/pr_pos_z-index.asp

这里是更新的 jsFiddle：http://jsfiddle.net/2NYve/7/

【讨论】：

我的对象元素需要绝对定位。当我使用相对定位时，两个图形都没有重叠，它们是连续的。但感谢 z-index 提示，我复制了它

【解决方案3】：

将前景 div 的位置设置为“相对”而不是“绝对”，并添加一些右边距以将其放置在右侧一点。

<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: relative; z-index:5000;margin-right:10px"><a href="javascript:goToLastNodeDiv()"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></a></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>

【讨论】：

我的对象元素需要绝对定位。当我使用相对定位时，两个图形都没有重叠，它们是连续的