동일한 높이의 열이 포함 된 응답 눈금

Question

단순한 레이아웃 문제로 인해 어려움을 겪고 있습니다.

4 개의 제목 상자가있는 레이아웃이 있습니다. 4 개의 상자는 4 번 ("책상"보기) 일 때 동일한 높이가되어야합니다. 또한 가로로 2 개 ("타블렛"보기) 인 경우 높이가 같아야합니다. 전체 너비 ("모바일"보기) 인 경우 높이가 중요하지 않습니다.

내가 현재 갖고있는 것을 보여주기 위해 피들 (fiddle)을 설정했습니다. 응답 할 때 발생하는 일은 &입니다.

https://jsfiddle.net/c5oumq2z/

<div class="report_v3_summary_box"> 

은 콘텐츠에 배경 색상을 추가하고 열이 응답 할 때 여백을 추가하는 것입니다.

누구에게 조언 해 주시겠습니까? CSS 나 JS :

감사

Answer 1

당신은 내보기에 두 가지 옵션이 있습니다.

JS를 사용하면 matchheight과 같은 jquery 라이브러리를 사용할 수 있습니다.

CSS를 사용하면 원하는 효과를 얻기 위해 flexbox 속성을 사용할 수 있습니다. flexbox에 Here's a really nice guide. Here's an example (하단).

당신은 기본적으로 (귀하의 경우 행 인 부모 컨테이너에)입니다 필요한 것은 : .report_v3_summary_box에 다음

flex-wrap: wrap; 
display: flex; 

:

height: 100%; 

그리고에 여백 하단으로 이동 : .col.l3.m6.s12.

Answer 2

우리는 2017 년 이래로 "그리드"를 사용할 수 있습니다. 다음은 최소의 노력으로이 작업을 수행 할 수있는 방법을 예입니다

https://jsfiddle.net/herrfischerhamburg/ym2rc6tm/1/ 1 × 4 열위한

예 CSS (크기 조정 Browserwindow, 그것은 반응이의) :

.grid-container { 
    grid-template-rows: 1fr; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
} 

쉬운

?