Responsive Galerie mit Inhalt

Question

Ich bin ein Anfänger und es ist mein erstes Mal auf Stack Overflow, so hoffe ich, dass Sie vergeben werden :) Ich versuche, kleine responsive "Galerie" mit zwei Bildern und div mit Text (vide : img). Das Problem ist mit diesen weißen Streifen und Inschriften auf Bildern. Ich kann sie nicht dazu bringen, sich wie Bilder zu verhalten - in kleineren Größen fallen sie auf den Boden. Wie kann ich sie an die Bilder "hängen" lassen? Ich benutze Flexbox.

Vielen Dank für Ihre Antworten und Geduld :)

Code:

.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

Es ist nur eine Vermutung, weil ich haben Arbeit mit flex noch nicht. Aber was ist passiert, wenn Sie den .white-stripe zu display: block machen?

Aber die mehr benötigte Antwort könnte sein: make .box zu position: relative.