Question

我试图在一个较大的图像上出现2个小形状;左上角的一个＆amp;另一个在右下角。所以图片应该如下所示：

http://i52.tinypic.com/j5cqw9.png

我的问题是我的HTML＆amp; CSS并没有使较小的图像位于较大图像的顶部。较小的图像未放置在正确的位置。

我做错了什么？ PS：CSS垂直对齐跨浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    <!--
        body { background-color: gray; }
        .col1 { width: 30%; float: left; background-color: blue; }
        .col2 { width: 70%; float: left; }

        #pastEvents       { background-color: red; }
        #pastEvents td    { padding: 20px; background-color: blue; }

        .pastEventDiv     { position: relative; background-color: yellow; }
        .eventBorderNorth { position: absolute; left: 0px; top: 0px; z-index: 10; }
        .eventBorderSouth { float: right; vertical-align: bottom; z-index: 10; /*text-align: right;*/ }
        .eventPic         { position: absolute; left: 0px; top: 0px; z-index: 0; }

    -->
    </style>
</head>

<body>

    <div class="col1">
        abvdvf
    </div>

    <div class="col2">
        <table id="pastEvents">
            <tr>
                <td>
                    <div class="pastEventDiv">
                        <img class="eventBorderNorth" src="images/picBorderNorth.png" width="30" height="30" alt=""/>
                        <img class="eventBorderSouth" src="images/picBorderSouth.png" width="30" height="30" alt=""/>
                        <img class="eventPic" src="images/1.jpg" width="100" height="200" alt=""/>
                    </div>
                </td>
                <td>
                </td>
            </tr>
        </table>
    </div>

</body>

</html>

Answer 1

你为什么要漂浮.eventBorderSouth？它应该是：

.eventBorderSouth { position: absolute; right: 0; bottom: 0; z-index: 10;}

就像左上图像一样，但是在另一个角落。

Answer 2

你需要做几件小事来完成这项工作。首先，摆脱float上的vertical-align和.eventBorderSouth，然后添加GolezTrol建议的定位：

.eventBorderSouth {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
}

现在您会看到.eventBorderSouth位于.eventBorderNorth的左上角。为什么是这样？好吧，您的.pastEvent <div>只包含绝对定位的元素，因此它的宽度和高度为零;显而易见的解决方案是告诉<div>应该有多大：

.pastEventDiv {
    position: relative;
    background-color: yellow;
    width: 100px;
    height: 200px;
}

实例（当然是图片已损坏）：http://jsfiddle.net/ambiguous/MBGVX/

在较大的图像上显示较小的图像

2 个答案: