0

这是我第一次设计流畅的布局，我想做的一件事是在照片底部添加标题。我正在使用的方法是将照片（宽度：100%）放在一个 div（宽度：50%）内，并在照片下添加一个包含标题的 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 的高度，并使“顶部”成为高度和填充的负数？

4

3 回答 3

0

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

#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;
}
于 2013-04-15T11:16:37.303 回答
0

纯 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试试这个小提琴

于 2013-04-15T11:17:06.460 回答
-1

为此，您可以尝试使用jQuery UI Position。

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

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

然后更改 top 属性以进行覆盖：

$("#elementToPosition").css('top',$("#elementToPosition").css('top') - 10px);
于 2013-04-15T11:12:08.410 回答