Html 负边距顶部与浮动不'；无法按预期工作（仅在Firefox中）

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

这是一个密码，这是我的密码：

HTML:

---

在我尝试使用

top之前：-80px但是我在每行之间都有一个很大的空白（因为文本字段）。所以现在我使用
margintop:-80px但这似乎只适用于Firefox。
位置：绝对位置如何

位置：绝对位置如何

如果在RightTile类中删除图像上的
浮动：right
，该怎么办？对这样的事情：

.rightile img{
宽度：100%；
}
如果在RightTile类中删除图像上的
浮动：right
，该怎么办？对这样的事情：

.rightile img{
宽度：100%；
}
很抱歉，我不知道问题出在哪里？您是否尝试过使用IE9、Chrome、Opera和Safari查看示例？Text2和Text4被移到了上面。很抱歉，我不知道问题出在哪里？你有没有尝试过用IE9、Chrome、Opera、Safari查看这个例子？Text2和Text4移到上方。+1-这是一个完美的例子，说明何时使用
位置：绝对值
。虽然您应该将代码示例移到您的答案中。但我以前尝试过使用
position:absolute
（在
TileImage
和
TileText
上）。但是我的布局被破坏了，我没有使用
top
。您将
rigthile
和
LeftTile
上的
position:relative
与
TileText
和
top
上的
position:absolute
组合使用。也许您想向我更详细地解释一下解决方案？
位置：绝对
相对放置在最近的位置框中。因此，要使其相对于直接父元素，必须为父元素指定一个非
静态
（默认）的位置。在这个例子中，我们给它
位置：relative
，这样它就被保存在文档流中。我也会使用
bottom
而不是
top
，因为您的位置更靠近框的底部。添加位置：相对于容器后，带有位置：absolute的内部元素将引用该容器，而不是整个文档。另外，如果您在两个元素上都使用
位置：absolute
（
TileImage
和
TileText
）那么这也不会起作用，因为这会使它们都从文档流中消失，并且父框将没有高度。因此，您只需将
TileText
绝对定位，就像您希望
TileImage
指定高度一样。+1-这是何时使用
位置：绝对
的完美示例l尽管您应该将代码示例移到您的答案中。我以前尝试过使用
位置：绝对值
（在
TileImage
和
TileText
）但是，我的布局被破坏了，我没有使用
top
。而是在
righthtile
和
LeftTile
上使用
position:relative
，在
TileText
和
top
上结合使用
position:absolute
。也许你想更详细地向我解释一下解决方案吗？
p位置：绝对
相对放置在最近的位置框中。因此，要使其相对于其直接父元素，必须为父元素指定一个非静态
（默认）的位置。在本例中，我们给它指定了
位置：相对的
，以便它保留在文档流中。我还将使用
底部
而不是
顶部
，因为您的位置更靠近框的底部。添加位置：相对于容器后，带有位置：绝对的内部元素将引用该容器替代整个文档。另外，如果在两个元素上使用
位置：绝对值（
TileImage
和
TileText
）那么这也不会起作用，因为这会使它们都从文档流中消失，并且父框将没有高度。因此，您只能将
TileText
绝对定位为希望
TileImage
指定高度的位置。
<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>

.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;
}