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

【问题标题】：CSS positioning, overlaying divs in fluid layoutCSS 定位，在流体布局中覆盖 div
【发布时间】：2013-04-15 19:17:06
【问题描述】：

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

【问题讨论】：

你需要使用 jquery 来计算这种类型的数学

标签： css fluid-layout css-position

【解决方案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试试这个小提琴

【讨论】：

如果您创建 width: 100%; 并添加 padding: 10px; 这将不起作用，因为总宽度将大于 100% 并显示滚动条 :)。应在另一个元素内添加填充
你说的是哪个元素的宽度？我敢肯定你没有仔细阅读 CSS 部分，也没有尝试过小提琴；）

【解决方案2】：

试试这个，看看它是什么样子的：

#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;
}

【讨论】：

所以您在将height: 30px 添加到#gallerydescription 时没有阅读but it's not really a true fluid layout and it looks ugly if the caption is too or too short. Is there a way where I could let the length of the caption to determine the height of the caption div

【解决方案3】：

您可以为此尝试jQuery UI Position。

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

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

然后改变 top 属性进行叠加：

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

【讨论】：