Question

这是我第一次设计流畅的布局，而我正在尝试做的其中一件事就是在照片底部叠加一个标题。我正在使用的方法是在div（宽度：50％）内放置照片（宽度：100％）并在照片下添加包含标题的div。为了使它叠加，我将标题的高度设置为静态30px并将位置设置为相对和顶部-50px（+填充）。

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

试试这个并看看它的样子：

#contentdiv {
    width:50%;
    position: relative
}
#gallerydescription {
    height:30px;
    padding:10px;
    background-image:url(../contentbkg.png);
    position:absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
}

Answer 2

问题的纯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尝试这个小提琴

Answer 3

您可以为此目的尝试jQuery UI Position。

它允许相对定位两个元素，如

$("#elementToPosition").position({
  my: "left top",
  at: "right bottom",
  of: "#targetElement"
});

然后更改top属性以覆盖：

$("#elementToPosition").css('top',$("#elementToPosition").css('top') - 10px);

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

3 个答案:

CSS

标记（未更改）

更新