内容为

Question

我是初学者，这是我第一次使用Stack Overflow，所以我希望你会宽容:)我正在尝试使用两个图片和div文本构建小型响应式“图库”（视频：img）。问题在于这些白色条纹和图片上的铭文。我不能让它们表现得像图片 - 在较小的尺寸，它们落在底部。我怎样才能让它们“贴”到图片上？我正在使用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。