将div置于具有动态高度的绝对图片下

时间:2014-01-28 12:42:31

标签: css3

我的问题是将div放置在“动态图片”下,并在动态图片下方的div下面显示动态内容:

Link to the jsfiddle

jsfiddle css类准备填写:

  1. .belowPicture
  2. .belowBelowPicture
  3. 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;
    
    }
    

    目标看: image of the goal

1 个答案:

答案 0 :(得分:4)

您可以尽可能多地relativeabsolute定位absolutely position an element with a relativity position element,但是你无法通过absolute定位来做你想要的事情,因为一旦元素的位置受到另一个元素的位置的影响,那就是relative定位。

编辑:您可以在使用floatclear之后实现目标:http://jsfiddle.net/nDvYv/1/