将div定位在高度动态变化的绝对图片下方

Question

将div定位在高度动态变化的绝对图片下方

5

我的问题是将一个div定位在一个“动态图片”下面，并在该div下方放置动态内容：链接到jsfiddle 准备填写的jsfiddle css类：

1. .belowPicture 2. .belowBelowPicture HTML代码：

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

css：

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

}

目标外观：

- Anders Metnik

如果您想对齐文本，为什么不将wallDetailMessage部分设置为绝对定位而不是图片呢？有什么原因吗？ - Kuzgun

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sinister Beard · Accepted Answer

你可以混合使用相对和绝对定位，例如你可以用相对定位的元素绝对定位一个元素，但你不能用绝对定位实现你要求的效果，因为一旦一个元素的位置受到其他元素位置的影响，那就是相对定位。

编辑：你可以使用浮动和清除来实现你想要的效果：http://jsfiddle.net/nDvYv/1/