Question

我想在另一张图像的右前方对齐图像。

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

我已经尝试过浮动：正确并且对齐=“正确”，但是那是最好的工作。正如你在示例中看到的那样，背景是一个带有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 proprety：http://www.w3schools.com/cssref/pr_pos_z-index.asp

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

Answer 3

将前景divs位置设置为'relative'而不是'absolute'，并添加一些右边距以将其放置在右侧。

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

如何将div对齐？

3 个答案: