html - 如何将 div 向右对齐？

Question

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

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

http://jsfiddle.net/2NYve/

我已经尝试过 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> 

Answer 1

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

right: 20px; 

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

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

Answer 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;

而另一个，带有谷歌标志：

z-index:1

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

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

Answer 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>