CSS定位，在流体布局中覆盖div

Question

这是我第一次设计流畅的布局，我正在尝试做的其中一件事是在照片底部添加标题。我使用的方法是将照片 (width:100%) 放在一个 div (width:50%) 中，然后在照片下方添加一个包含标题的 div。为了让它覆盖，我将标题的高度设置为静态 30px，并将位置设置为 relative 和 top -50px (+padding)。

CSS:

#contentdiv {
    width:50%;
}
#gallerydescription {
    height:30px;
    padding:10px;
    background-image:url(../contentbkg.png);
    position:relative;
    top:-50px;
    margin-bottom:-50px;
}

HTML:

<div id="contentdiv">
   <img src="blog/1.gif" width="100%" />
   <div id="gallerydescription">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
   </div>
</div>

这在视觉上满足了我的要求，但它并不是真正的流畅布局，如果标题太短或太短，它看起来很难看。有没有一种方法可以让标题的长度确定标题 div 的高度，并让“顶部”成为高度和填充的负值？

Answer 1

针对您遇到的问题的纯 CSS 解决方案

CSS

      #contentdiv{
        width: 50%;
        position: relative;
     }
     #gallerydescription{
        padding: 10px;
        background-image: url('../contentbkg.png');
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        position: absolute;
        bottom: 0;
        width: 100%;
        max-height: 60%;
        overflow: hidden;
     }

标记(未更改)

 <div id="contentdiv">
     <img src="blog/1.gif" width="100%" />
     <div id="gallerydescription">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
     </div>
  </div>

更新

jsfiddle试试这个 fiddle