Html CSS问题，相互之间的div

我的HTML和css有几个问题，这是我的HTML：

<div class="picCommnet" style="background-color:#FFF8AD; padding: 5px 0 5px 0; border: 2px dotted #d2d9e7;">
     <div style="width:20%; float:right;background-color: yellow;">
          <img src="">
     </div>
     <div style="width:75%; float:right; padding: 5px 0 5px 0; border: 2px dotted #d2d9e7;">
          <div style="width:100%; background-color: green;">
               מתן בדיקה
          </div>
          <div style="width:100%; background-color: paleturquoise;">
               check comment
          </div>
          <div style="width:100%; background-color: red;">
          </div>
      </div>
      <div style="width:5%; float:right;">
           <img src="">
      </div>
</div>

מתן בדיקה
检查注释

所有css都在标签的样式属性中，这就是我想要的：

这是我得到的：

如您所见，假设为一个低于另一个的3个div相互重叠，div内的文本不知何故位于其外部，div高度保持为0

我怎么修理它

编辑： 这是我尝试添加的表，而不是div：

<table>
   <tbody>
      <tr>
         <td rowspan='3'>Remove Comment Pic</td>
      </tr>
      <tr>
         <td>Comment UserName</td> 
         <td>Comment Text</td> 
         <td>Likes</td> 
      </tr>
      <tr>
         <td rowspan='3'>User Profile Pic</td>  
      </tr>
   </tbody>
</table>

删除评论图片
注释用户名
评论文本
喜欢
用户档案图片

获取此布局最可靠的方法是使用表注意：使用网格布局更好，但是浏览器支持会有所不同，表格是最可靠的方式，但根本不是最好的方式

基本上，你会有一张这样的桌子：

<table>
  <tbody>
    <tr>
      <td rowspan="3">Yellow box</td>
      <td>Green box</td>
      <td rowspan="3">White box</td>
    </tr>
    <tr><td>Turquoise box</td></tr>
    <tr><td>Red box</td></tr>
  </tbody>
</table>

黄盒子
绿箱
白盒
绿松石盒子
红盒子

尝试将它们全部放在位置：绝对。然后你可以独立定位每一个单元格。

发布一个实时演示或JSFIDLE，以获得更快、最准确的响应。这就是我做表格的原因：出于某种原因，表格中的所有单元格都会相互重叠，这可能是什么原因？这就是我尝试使用表格的原因：你仍然在使用你所有的样式，你不是吗？为什么人们不直接使用我给他们的代码，然后再说它不起作用？？？我已经在原始帖子中发布了我正在使用的代码，表格中根本没有样式属性。你能展示你正在做的事情的一个实例吗，这样我就可以真正看到发生了什么？你是说每个div？同样尝试使用表格也没有显示出任何成功，我在上面评论了如何查看示例Yes each div。将其与原始样式一起使用divs，而不是table。如果要对表执行此操作，请尝试为每个表指定一个id，然后手动设置它们的样式。