Javascript 为什么top:0px在display:inline中不工作？

我试图使两个div相邻或平行。我使用了显示内联块。它可以工作，但问题是第二个div的文本位于第一个div的底部。为什么

我需要它应该是那样的

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

这是我的密码

---

移除

position:absolute

并对两个内联块容器使用

vertical align:top

：

#右容器{
显示：内联块；
宽度：64%；
位置：相对位置；
边框：1px实心；
垂直对齐：顶部；
}
#文本容器{
边框：1px纯蓝色；
边缘顶部：10px；
}

---

演示：

删除

位置：绝对

并对两个内联块容器使用

垂直对齐：顶部

：

#右容器{
显示：内联块；
宽度：64%；
位置：相对位置；
边框：1px实心；
垂直对齐：顶部；
}
#文本容器{
边框：1px纯蓝色；
边缘顶部：10px；
}

---

演示：

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

输出：

#右容器{
边框：1px实心；
显示：内联块；
顶部边距：1em；/*与左侧容器匹配的边距*/
位置：相对位置；
垂直对齐：顶部；/*添加以将其与顶部对齐*/
宽度：64%；
}
#文本容器{
边框：1px纯蓝色；
}

---

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

输出：

#右容器{
边框：1px实心；
显示：内联块；
顶部边距：1em；/*与左侧容器匹配的边距*/
位置：相对位置；
垂直对齐：顶部；/*添加以将其与顶部对齐*/
宽度：64%；
}
#文本容器{
边框：1px纯蓝色；
}

---

更改为此，也无需更改此处的位置

 #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;

    }

---

更改为此，也无需更改此处的位置

 #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;

    }

---

只需添加位置：绝对在#RIGHT CONTAINER中，它将为您工作，并根据您的想法应用一些上边距

只需添加位置：绝对在#RIGHT CONTAINER中，它将适用于您，并根据您的想法应用一些上边距