设置一个负边距，它是其高度的百分比。纯 CSS

Question

我有一系列图像，它们有不同的标题。 这些标题中的每一个都需要出现在图像底部的中间位置。 这是它的外观以及我如何在 div 中构建它的模型。 因为标题的底部和下面的任何 div 之间需要有空间，所以标题不能绝对定位。

我知道这可以在 javascript 中完成，但这将是一个 hack，所以我更愿意找到一个仅 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

我通过以下方式实现了这一目标：

/* Required to expand element to height required. */
position: relative;
/* Move up by 50% of own Height. */
transform: translateY(-50%);

Answer 3

不幸的是，事实证明，仅使用 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 4

因此，您希望始终将此标题贴在图像底部，同时根据标题高度位于父容器下方 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 5

尝试将 Margin-top 更改为 -25%。

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