html - 在定位的 div 中添加文本时，CSS 位置会消失吗？

Question

我有这个完美编码的布局: http://jsfiddle.net/4Xbc8/

这正是我想要的，但是如果我在 div 中添加任何单词，它们都会错位。

我有点理解 div 的工作原理，但我不知道为什么 div 中的内容会错位。

知道为什么吗？

body
{
    background-color: blue;

    width: auto;
    overflow: auto;

    white-space:nowrap;

}

#mainwindow
{
    margin-top: 15px;
    max-height: 600px;
    background-color:black;
    height: 600px;
    width: 3000px;
    padding: 5px 5px 5px 5px;


}
#search_tile
{
    background-color: yellow;
    height: 50px;
    width: 350px;
    display: inline-block;
}
#timeline_tile
{
    margin: 5px;
    position:relative;
    width: 250px;

    height: 580px;
    background-color: white;
    display: inline-block;

}
#conversations_tile
{
    top: -210px;


    position:relative;
    width: 250px;
    height: 375px;
    background-color: gray;
    display: inline-block;
}
#source_tile
{
    background-color: yellow;
    width: 450px;
    height: 200px;
    display: inline-block;
    position:relative;
    left: -255px;
}



<div id="mainwindow">                   <!-- main window wrapper -->

    <div id="leftarea" class="leftarea">     <!-- LEFT AREA -->


        <div id="timeline_tile" class="timeline_tile"><div></div></div>
        <div id="conversations_tile" class="conversations_tile"></div>
        <div id="source_tile" class="source_tile"></div>

    </div>

Answer 1

给 vertical-align: top; 你的 div 在下面，因为你不希望在下面。对于您的“source_tile”，请提供 vertical-align: bottom;

看看你的 fiddle here