负 margin-top 与浮动组合不能按预期工作（仅在 Firefox 中）

Question

我想尝试创建此屏幕，但右侧的文本字段移至上方。

这是一个 工作示例这是我的代码：

HTML：

<div class="TileMenu">
    <div class="TileRow">
        <div class="LeftTile">
            <div class="TileImage">
                <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Castle" alt="Castle" />
            </div>
            <div class="TileText">
                <p>Text1</p>
            </div>
        </div>
        <div class="RightTile">
            <div class="TileImage">
                <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="House" alt="House" />
            </div>
            <div class="TileText">
                <p>Text 2</p>
            </div>
        </div>
    </div>
    <div class="TileRow">
        <div class="LeftTile">
            <div class="TileImage">
                <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Satellite" alt="Satellite" />
            </div>
            <div class="TileText">
                <p>Text 3</p>
            </div>
        </div>
        <div class="RightTile">
            <div class="TileImage">
                <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Palace" alt="Palace" />
            </div>
            <div class="TileText">
                <p>Text 4</p>
            </div>
        </div>
    </div>
</div>

CSS：

.TileRow{
    padding: 5px 0px;
    clear: both;
}

.LeftTile{
    width: 49.7%;
    float: left;
    /*height: 340px;
    overflow: hidden;*/
}

.LeftTile img{
    width: 100%;
}

.RightTile{
    width: 49.7%;
    float: right;
    /*height: 340px;
    overflow: hidden;*/
}

.RightTile img{
    width: 100%;
    float: right;
}

.TileImage{
    width: 49.7%;
}

.TileText{
    position: relative;
    margin-top: -80px;
    max-width: 150px;
    height: 50px;
    background-color: #FFF;
    color: #57abe9;
    padding-left: 10px;
    display: table;
}

.TileText p{
    display: table-cell;
    vertical-align: middle;
    font-size: 1.3em;
}

在我尝试使用top：-80px;之前但比我有一个大白每行之间有空格（由于文本字段）。所以现在我使用 margin-top: -80px; 但这似乎只适用于 Firefox。

Answer 1

位置：绝对怎么样？

http://jsfiddle.net/KjakS/8/

Answer 2

如果在 RightTile 类中删除图像上的 float:right 会怎样？像这样的东西： http://jsfiddle.net/KjakS/7/

.RightTile图像{
宽度：100%；
}