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

Question

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

这正是我想要的，但是如果我在divs 中添加任何单词，它们都会不合适。

我有点理解divs 是如何工作的，但我不知道为什么divs 中的内容不合适。

知道为什么吗？

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;

在这里看到你的小提琴