文本块未覆盖在 Parent Div 的实际底部

Question

我有一张图片，我已将其放入 div class“外部”并裁剪为特定尺寸。我使用显示的样式在另一个 div class“mythumbnail”中覆盖了文本。我很困惑为什么我不能让 div“mythumbnail”与 div“outer”中的图片底部相邻。我将不胜感激。此外，我希望 div“mythumbnail”根据标题和文本的数量展开或收缩，而不管“外部”尺寸如何，但总是将 div“mythumbnail”的高度折叠到底部div“外部”。

@import url('https://fonts.googleapis.com/css2?family=Changa+One:ital@0;1&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

h1,h2,h3{
    font-family: 'Changa One',Verdana, Geneva, sans-serif;
    font-weight: normal;    
}
p {
  padding: 0;
  margin: 0;
}
body {
  font-family:'Open Sans',Verdana, Geneva, sans-serif;
  font-size: 1rem;
  margin: 0;
  padding: 1rem;
  background-color: #cfbaff;
}

.outer {
  height: 250px;
    width: 250px;
    background-color: #6561B8;
    background-size: cover;
    position: relative;
    text-align: center;
    color: white;
    padding: 0;
    margin: 0;
}
.outer img {
  height: 250px;
    width: 250px;
  object-fit: cover;
}
.mythumbnail h2,
.mythumbnail p {
  padding: 0 .5rem 0;
  margin: 0;
}
.mythumbnail {
  margin: 0;
    padding: 0.3rem 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(0,0,0,0.4);

}

<html>
  <body>
    <div><h1>Image example</h1></div>
    <div class="outer"><img src="https://wpgeek.low.li/wp-content/uploads/2021/03/june-2020-purple-cone-flowers-b.jpg" />
      <div class="mythumbnail">
        <h2>Title</h2>
        <p>My fairly simple description that takes one or two lines...</p>
      </div>
    </div>
    <div><p>It should look something like this:</p>
        <img src="https://wpgeek.low.li/wp-content/uploads/2021/03/june-2020-purple-cone-flowers-thumb.jpg" />
    </div>
  </body>

Answer 1

将您的缩略图 css 更改为：

.mythumbnail {
  margin: 0;
  padding: 0.3rem 0;
  position: absolute;
  bottom: 0;
  right:0;
  left: 0;
  background-color: rgb(0,0,0,0.4);
}

请注意 right:0; 和 left:0; 使 div 的行为与 left:0; 和 width:100%; 相同。就看你怎么写了。

文本块未覆盖在 Parent Div 的实际底部

Text Block Not Overlaying at actual Bottom of Parent Div

css

text

overlay

image