0

我有一个图像，我已将其放入裁剪为特定大小的 div 类“外部”中。我已经使用显示的样式在另一个 div 类“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>

4

1 回答 1

2

将您的缩略图 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;andleft:0;使 div 的行为与left:0;and相同width:100%;。这取决于你如何写它。

于 2021-03-02T19:36:03.047 回答