반응형 이미지와 텍스트 Div를 나란히 배치

Question

그래서 하나의 div는 이미지이고 다른 하나는 배경이 있는 텍스트인 템플릿을 만들려고 합니다. 이제 텍스트가 특정 픽셀 너비의 이미지 아래에 있도록 이 템플릿을 반응형으로 만들고 싶습니다. stackoverflow를 거치면서 Flexbox를 사용해야 한다는 글을 수없이 보았습니다. 노력했지만 제대로 할 수 없었습니다.

데스크톱에서는 다음과 같아야 합니다: https://i.stack.imgur.com/HDehv.jpg 스마트폰에서는 여기 https://i.stack.imgur.com/D4VOh로 점프해야 합니다. .jpg

적어도 데스크톱 버전에서는 양쪽에 여백이 필요합니다. 이제 내 문제는 내 이미지가 내 사이트에 제한이 없고 너무 커지고 행으로 자동 전환이 발생한다는 것입니다(내가 아는 한).

내 코드는 여기에 있습니다: https://jsfiddle.net/wqesp83a/

으아아아 으아아아

div와 이미지의 너비와 높이를 제한하려고 했지만 도움이 되지 않았거나 모든 것이 더 이상 손상될 수 있었습니다. 누구든지 내 오류를 볼 수 있도록 도와주시면 매우 감사하겠습니다.

Answer 1

grid 구하러 오세요:

으아아아

400px 너비까지 늘릴 수 있는 한 컨테이너의 각 하위 항목에 대해 그리드 열이 생성됩니다. 너비가 400px인 그리드 항목을 위한 공간이 충분하지 않으면 열로 래핑됩니다. px 값을 원하는 값으로 바꾸세요.

grid-auto-rows: 1fr 두 열의 높이를 동일하게 만듭니다.

으아아아 으아아아