为什么top：0px无法显示：内联？

Question

我试图将两个div相邻或并行。我使用显示内联块。它有效但有问题是第二个div的文本是第一个div的底部为什么？

我需要它应该看起来像

我需要图像和描述相邻显示，如图所示。但我的描述显示图像的底部。我使用顶部：0px ，但仍然没有效果为什么？

这是我的代码 http://plnkr.co/edit/wZARoymFXSqXrRaH3hVn?p=preview

   #rightContainer{
      display: inline-block;
      width:64%;

      position:relative;
      border:1px solid ;
    }
    #textContainer{
      position:absolute;
      top:0px;
      border:1px solid blue;

    }

Answer 1

删除position: absolute并对两个内联块容器使用vertical-align: top：

#rightContainer {
    display: inline-block;
    width: 64%;
    position: relative;
    border: 1px solid;
    vertical-align: top;
}

#textContainer {
    border: 1px solid blue;
    margin-top: 10px;
}

演示： http://plnkr.co/edit/83wDLVa7naGhhrbIrY3E?p=preview

Answer 2

改为更换父div。删除子div上的绝对定位。

<强>输出：

#rightContainer {
  border: 1px solid;
  display: inline-block;
  margin-top: 1em; /* Margin to match with left container */
  position: relative;
  vertical-align: top; /* Add  to align it to top */
  width: 64%;
}
#textContainer {
  border: 1px solid blue;
}

Plunker

Answer 3

更改为此，也无需在此处更改定位。

 #slideTest{
      margin-top:1em;
      border:1px solid pink;
      width:35%;
      height:100px;
      display: inline-block;
      float:left;               //CHANGE HERE
    }



    #textContainer{
      position:absolute;
      top:13px;          //HERE
      border:1px solid blue;

    }

Answer 4

只需在#rightContainer中添加位置：绝对; ，它就能为您效果并根据您的想法应用一些上边距