与浮点组合的负边距不能正常工作（仅适用于Firefox）

Question

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

这里是一个working example这里是我的代码：

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

如果去掉图像上的float:right在RightTile类是什么？为了这样的事情：http://jsfiddle.net/KjakS/7/

.RightTile img{ width: 100%; }