콘텐츠가 포함 된 반응 갤러리

Question

저는 초보자입니다. 스택 오버플로에 처음으로 참여했습니다. 용서할 수 있기를 바랍니다. 나는 그림과 텍스트로 두 개의 그림과 div로 작게 반응하는 '갤러리'를 만들려고합니다. : img). 문제는 사진에 흰색 줄무늬와 비문이있는 것입니다. 나는 그들이 그림처럼 행동하도록 만들 수 없다 - 더 작은 크기에서, 그들은 바닥에 떨어지고있다. 사진에 "붙이게"할 수있는 방법은 무엇입니까? 나는 flexbox를 사용하고있다. 내가 haven't

.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

키우면 단지 추측 때문에 작업 : 모든 답변과 인내 :

코드에 대한

감사합니다 플렉스와 함께. 하지만 흰 줄무늬를 display: block으로 만들면 어떨까요?

그러나 더 필요한 대답은 다음과 같습니다. make .box는 position: relative입니다.