div로 표현하고 싶습니다. 가능할까요? 채택완료

각 컨텐츠
왼쪽 정렬은 float : left로
float : left 상위 태그 div에는 display : inline-block으로 싸주시면, 안쪽 컨텐츠에 맞춰서 화면 지정도 되고 아래에 다른 컨텐츠를 넣을 수도 있습니다.
(이렇게 해야 화면 안터짐)

아니면, flex로 하는 방법도 있는데 이 부분은 구글 검색하셔서 옵션들을 보셔야 되요.
위의 이미지를 보시면, 아래쪽은 세로크기가 다 다르게 되어있죠.
저런식으로도 flex로는 가능합니다.

그걸 모르면 javascript로 이미지 사진 다 비교해서 컨텐츠 가로크기 나누기 4까지 다 산출해야되고,
크기별로 반응형 코드를 javascript로 다 맞춰주면서 각 화면 크기별 컨텐츠 크기를 javascript로 다 산출하여야됩니다.(제가 2년차인가 3년차일때 만듬 이건 개고생)

결론,
flex를 검색해 보시거나,
아니면, display:inline-block 과 float:left를 이용하는 방법으로 해결하심이 좋아보입니다.

추가로 사진 부분도 크기가 다 똑같지 않다면,
div태그로 가로 크기는 % 비율로, 세로는 크기 fix 시켜서 영역을 만들어 주신 다음에, div에 배경으로 넣는 방법이 있습니다.
배경 넣는 방법 예시: background : url('xxxxxxx.png') no-repeat center center / cover;

no-repeat은 반복 안하겠다는 옵션, center center는 포지션 cover는 background-size 입니다.

끝.(더 있지만, 일하는 중이라 피곤함.)

위 이미지는 제가 만들어 놓은 것으로,

링크 : http://financelearn.co.kr/ui_play/

에 있고, 보시고 유익하셨다면, 광고 클릭 부탁드립니다. 하하하
끝!