Latest web development tutorials

재단 이퀄라이저 (이퀄라이저)

우리는 컨테이너 요소를 추가 할 수 있습니다 data-equalizer 속성을 각각의 하위 요소에 추가 data-equalizer-watch 동일한 높이 동점을 만드는 속성입니다. 최상위 요소는 다른 요소의 높이를 결정한다.

참고 : 슬라이더 자바 스크립트가 필요합니다. 그래서 당신은 한답니다의 JS를 초기화해야합니다 :

예

<사업부 클래스 = "행"데이터 -equalizer>
<사업부 클래스 = "중간 4 열 패널"데이터 이퀄라이저 시계>
ipsum의가 lorem ...
</ DIV>
<사업부 클래스 = "중간 4 열 패널"데이터 이퀄라이저 시계>
나오지도 유타 ...
</ DIV>
<사업부 클래스 = "중간 4 열 패널"데이터 이퀄라이저 시계>
ipsum의가 lorem ...
</ DIV>
</ DIV>

<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>

»시도

다른 화면 이퀄라이저

추가하여 이퀄라이저에 data-equalizer-mq=" value " MQ는 다양한 화면 크기에 대해 동일한 높이로 설정 속성. 값은 다음 중 하나가 될 수 있습니다 :

값 기술 예
medium-up 기본. , 40.063em보다 큰 폭 동일한 컨테이너 높이를 만들기
large-up , 64.063em보다 큰 폭 동일한 컨테이너 높이를 만들기 시험
xlarge-up , 90.063em보다 큰 폭 동일한 컨테이너 높이를 만들기 시험
xxlarge-up , 120.063em보다 큰 폭 동일한 컨테이너 높이를 만들기 시험

중첩 된 콘텐츠

data-equalizer 및 data-equalizer-watch 속성의 동일한 값을 추가합니다. 이것은 등화 용기에 함께 접속 될 수있다. 반복가 일치되어 있는지 확인, 이퀄라이저를 중첩 :

예

<! - 균등화 컨테이너 ->
<사업부 클래스 = "행"데이터 -equalizer = "첫 번째">
<사업부 클래스 = "중간 4 열">
<사업부 클래스 = "패널"데이터 "첫 번째"-equalizer 시계 =>
<H3> 패널 </ H3>

<! - 등화 콘테이너 내의 균등화 컨테이너 ->
<사업부 클래스 = "행"데이터 -equalizer = "두 번째">
<사업부 클래스 = "패널"데이터 "두 번째"-equalizer 시계 =>
<H3> 중첩 된 패널 </ H3 >
<P> 로렘 입숨 ... </ P>
</ DIV>
<사업부 클래스 = "패널"데이터 "두 번째"-equalizer 시계 =>
<H3> 중첩 된 패널 </ H3 >
<P> 로렘 입숨 ... </ P>
</ DIV>
<사업부 클래스 = "패널"데이터 "두 번째"-equalizer 시계 =>
<H3> 중첩 된 패널 </ H3 >
<P> 로렘 입숨 ... </ P>
</ DIV>
</ DIV>
<! - 엔드 중첩 균등화 컨테이너 - >

</ DIV>
</ DIV>
<사업부 클래스 = "중간 4 열">
<사업부 클래스 = "패널"데이터 "첫 번째"-equalizer 시계 =>
<H3> 패널 </ H3>
<P> UT enim ... </ P>
</ DIV>
</ DIV>
<사업부 클래스 = "중간 4 열">
<사업부 클래스 = "패널"데이터 "첫 번째"-equalizer 시계 =>
<H3> 패널 </ H3>
<P>가 lorem의 Ipsum 제품 .... </ P>
</ DIV>
</ DIV>
</ DIV>

»시도