响应式画廊与内容

Question

我是一个初学者，这是我第一次在堆栈溢出，所以我希望你会宽容:)我试图建立两个图片和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

It's只是一种猜测，因为我haven't工作与柔性尚未。但是，如果您将.white-stripe设置为display: block，会发生什么情况？

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