Отзывчивая галерея с контентом

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

подмигнули только предположение, потому что я haven't работы с гибкой все же. Но что случилось, если вы сделаете белую полосу до display: block?

Но более необходимый ответ может быть: сделать .box до position: relative.