Css 使用动态高度将div定位在绝对图片下

我的问题是将div定位在“动态图片”下，并将动态内容定位在动态图片下的div下：

准备好填写的JSFIDLE css类：

.下图

.下图

HTML:

目标外观：

---

您可以尽可能多地混合

相对
和
绝对
定位，但绝对
定位不能满足您的要求，因为只要一个元素的位置受到另一个元素位置的影响，这就是
相对
定位

编辑：使用
float
和
clear
：
如果要对齐文本，为什么不将wallDetailMessage部分设置为绝对，而不是图片？有原因吗？没问题。此外，如果您正在使用基于网格的布局，您可能需要检查Bootstrap（）和Buffic（），而不是从头开始构建。
    <div id="wallDetailContent">     
  <section id="wallDetailMessage" style="width 100%"> 
     <img class="wallDetailPicture" src="http://web.scott.k12.va.us/martha2/dmbtest.gif">
     <div style="max-width:70%;">blah gik sig en tur, og købte blah med hjem</div>
  </section>
  <section class="belowPicture">
    <p class="wallByDate"> 20140126220550</p> 
    <p class="wallByBy"> af &nbsp; </p>
    <p class="wallByName"> Anders  </p>
  </section>
  <section class="belowBelowPicture">
      content (should be dynamic, able to fill all the height it need downwards.)
  </section>
</div>

.wallDetailPicture{
    top: 5px;
    right : 5px;
    position: absolute;
    display:box;
    width:auto;
    height:auto;
    max-width:30%;
    max-height: 200px;
}
.wallByName{
    font-weight: bold !important; 
    color: blue;
    display:inline-block !important;
}
.wallByDate{
    font-weight: bold !important; 
    display:inline-block !important;
}
.wallByBy{
    display:inline-block !important;
}
.belowPicture{
     background:red;
}
.belowBelowPicture{
    background:green;

}