具有内容的响应式图库

Question

我是初学者，这是我第一次使用 Stack Overflow，所以希望您能谅解 :) 我正在尝试使用两张图片和 div 构建小型响应式 'gallery'带文字（视频：img）。问题在于图片上的这些白色条纹和铭文。我不能让它们表现得像图片 - 尺寸较小时，它们会落在底部。我怎样才能把它们"stick"变成图片呢？我正在使用 flexbox。

感谢您的所有回答和耐心等待:)

代码：

.container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 1rem;
  box-sizing: border-box;
}

.responsive{
  max-width: 100%;

}

.box img {
  display: block;

}

.white_stripe {
  z-index: 1;
  background-color: white;
  opacity: 0.5;
  width: 329px;
  height: 60px;
  position: absolute;
  bottom: 30px;
  display: flex;
  @include tablet {
    flex-direction: column;
  }
  @include mobile {
    flex-direction: column;
  }
}

.box p {
  font-size: 0.8rem;
}

@media screen and (min-width: 600px) {
  .gallery {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .box {
    width: 30%;
  }
}

@media screen and (min-width: 1000px) {
  .box {
    width: calc(100% / 3);
  }
}

.box {
  margin: 1rem;
}

@media screen and (min-width: 600px) {
  .box {
    width: calc(50% - 3rem);
  }
}

@media screen and (min-width: 1000px) {
  .box {
    width: calc(33.3333% - 3rem);
  }
}

.txt {
  border: 1px solid #E0E0E0;
  padding: 0 20px 0 20px;
}

        <div class="container">
          <div class="gallery">
            <div class="box">
              <div class="white_stripe ws_one"></div>
                <img src="images/box1_img.jpg" alt="Chair CLAIR" title="Chair CLAIR" class="responsive">
            </div>
            <div class="box">
              <div class="white_stripe ws_two"></div>
                <img src="images/box2_img.jpg" alt="Chair MARGARITA" title="Chair MARGARITA" class="responsive">
            </div>
            <div class="box txt">
                <h4>Finds all inputs</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
            </div>
          </div>
        </div>

Answer 1

这只是一个猜测，因为我还没有使用过 flex。但是，如果您将 .white-stripe 设置为 display: block?

，会发生什么？

但更需要的答案可能是：将 .box 设为 position: relative。

具有内容的响应式图库

Responsive gallery with content

html

css

responsive