Question

我有一系列图像，它们有不同的标题。这些字幕中的每一个都需要看起来漂浮在图像底部的中间位置。这是一个关于它看起来如何以及我如何在div中构建它的模型。因为标题的底部和下面的div之间需要有空格，标题不能绝对定位。

我知道这可以在javascript中完成，但这将是一个黑客，所以我更愿意找到一个只有CSS的解决方案。

...以下是目前为止的代码：JS FIDDLE

.outer {
  position: relative;
  width: 320px;
  margin-bottom:24px // this needs to be the space between the bottom of the caption and the next image or whatever div is beneath.
}

.image {
  background-color: blue;
  width: 320px;
  height: 380px;
  position: relative;
  border-radius: 5px;
}

.caption {
  position: relative;
  margin-top: -24px;
  /* THIS NEEDS TO BE 50% of the Captions variable height */
}

.card {
  margin-right: 25%;
  margin-left: 5%;
  position: relative;
  background-color: #FFFFFF;
  padding: 24px;
  line-height: 24px;
}

<div class="outer">
  <div class="image">
  </div>
  <div class="caption">
    <div class="card">
      Lorem ipsum dolar sit amet consectetur idipiscine ipsumd lorem ipsum dolar sit amet. a
    </div>
  </div>
</div>

Answer 1

只需使用position: absolute和transform属性即可。

这是一个例子： https://jsfiddle.net/nawLywc9/1/

.block类必须是这样的：

.block {
    position:relative; // This is important
    background-color:#FFFFFF;
    padding:24px;
    line-height:24px;
    bottom: -50%; // This is important
    transform: translateY(-50px); // This is important
    width: 60%;
    border-radius: 5px;
    margin: 0 auto; // Only if you need to be centered
}

以下是预览：https://jsfiddle.net/nawLywc9/1/

Answer 2

因此，您希望始终将此标题贴在图像的底部，同时根据字幕高度坐在父容器的50％以下？

.outer {
  display:block;
  position:relative;
  width:320px;
}

.image {
  background-color:blue;
  width:320px;
  height:380px;
  display:block;
  position:relative;
  border-radius:5px;
}

/* Swapped the caption div to absolute, so it's always adhered to the bottom of the 'outer' container */

.caption {
  display:block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

/* Setup the 'block' div to do the actual '50%' manuevering based on the height of the  'caption' container with 'transform: translate(50%)' */

.block {
  transform: translateY(50%);
  background-color:#FFFFFF;
  padding:24px;
  line-height:24px;
}

我在这里设置了一个jsfiddle来演示@ https://jsfiddle.net/evanbriggs/v7rxqtcz/的变化。如果这是您的想法，请告诉我。

Answer 3

尝试将保证金率更改为-25％。

.caption {
display:block;
position:relative;
margin-top:-25%; 
}

Answer 4

不幸的是，事实证明只用CSS就完全不可能...... 尽管许多人认为没有有效的用例来进行负填充，但我认为这是。

所以...我最终做的是使用:: after块元素，它覆盖了标题背景的下半部分。但是，因为这意味着我没有圆角或者整个图像显示我还添加了一个javascript覆盖。这将查询字幕高度的一半，并将其作为填充底部值应用于容器。看下面的小提琴和代码：

https://jsfiddle.net/todd_143/nawLywc9/5/

<div class="outer">
  <div class="image">
  </div>
  <div class="caption">
    <div class="block">
      Lorem ipsum dolar sit amet consectetur idipiscine ipsumd lorem ipsum dolar sit amet.
    a</div>
  </div>
</div>

body {
  background-color:#FFFFFF;
}
.outer {
    display:block;
    position:relative;
    width:320px;
}

.image {
    background-color:blue;
    width:320px;
    height:350px;
    display:block;
    position:relative;
    border-radius:5px;
}

.caption {
    position:absolute;
    bottom:0; right:0; left:0;

}

.caption::before {
    background-color: #FFFFFF;
    content:"";
    position:absolute;
    top:50%; left:0; right:0; bottom:-1px;
    background-color#FFFFFF;
    display:block;
}

.block {
  position:relative;
  background-color:#FFFFFF;
  padding:24px;
  left:5%;
   line-height:24px;
  width: 60%;
  border-radius: 5px;
  margin: 0 auto;
  display:inline-flex;
  box-shadow: inset 0px -3px 0px 0px rgba(0,0,0,0.05);
}

$(document).ready(function() {
    promoCaption();
});

$(window).resize(function() {
    promoCaption();
});

function promoCaption() {
    //allow caption to sit half way on bottom edge of promos while keeping their ratio. Purely cosmetic
    $(".outer").each(function() {
        // get caption height
        var captionHeight = ($(this).find(".caption").height());
        // get caption offset by halfing its height
        var captionOffset = captionHeight / 2;
        // apply caption offset as padding bottom to the promo container
        $(this).css("padding-bottom", captionOffset);
    });
}

虽然令人沮丧，因为我不喜欢使用javascript进行任何结构化。但为了这个工作我无法找到任何其他方式。

Answer 5

我已经做到了：

transform:translateY(-50%);

设置负边距，即其高度的百分比。纯CSS

5 个答案: