3 열 응답 레이아웃

Question

3 열 응답 레이아웃을 수행하려고합니다. IE8에도 적용됩니다. 그래서 행의 요소 float: left를 사용하고,하지만 몇 가지 문제에 직면 :

1. 마지막 이미지를 연속으로하면 예기치 높이를 가지고있다. .news_preview { width: 100%; }이 (가) 발생했음을 이해하지만 해결 방법을 모르겠습니다.
2. .news__item 요소는 동일한 height = 100%이어야합니다. 자바 스크립트를 사용하여 문제를 해결하는 방법을 알고 있지만 과 함께 내 .news__item 요소에 대해서만 CSS를 사용하여 문제를 해결할 수 있습니까?

예 : https://jsfiddle.net/3nxetb45/1/

Answer 1

, 당신이 알아야 할 몇 가지 포인트가 있습니다 음. .main에서 height:100%을 삭제하고 div 다음에 clear:both을 사용했습니다.

clear 사용 : 둘 다 float 요소 바로 뒤에 사용하십시오. 따라서 높이 또는 공간 문제가 추가로 발생하지 않습니다.

두 번째 문제에 대해서, 나는 주 요소에 display:table을 사용하고 자식에게는 display:table-cell을 사용하고 float:left을 제거하여 원하는 출력을 얻었습니다. 또한 결과를 얻기 위해 하단 경계선을 대체했습니다. 자세한 내용 확인 바이올린을 위해 ..

확인 here