มูลนิธิควอไลเซอร์ (Equalizer)
เราสามารถเพิ่มองค์ประกอบภาชนะ data-equalizer ทรัพย์สินและเพิ่มแต่ละองค์ประกอบย่อย data-equalizer-watch คุณสมบัติในการสร้างควอไลเซอร์สูงเหมือนกัน องค์ประกอบสูงสุดกำหนดความสูงขององค์ประกอบอื่น ๆ
หมายเหตุ: เลื่อนต้องการ JavaScript ดังนั้นคุณต้องเริ่มต้น JS oundation:
ตัวอย่าง
<div class = "แถว" ข้อมูล -equalizer>
<ระดับ Div = "ขนาด 4 คอลัมน์แผง" data-ควอไลเซอร์นาฬิกา>
Lorem Ipsum ...
</ div>
<ระดับ Div = "ขนาด 4 คอลัมน์แผง" data-ควอไลเซอร์นาฬิกา>
UT sed ...
</ div>
<ระดับ Div = "ขนาด 4 คอลัมน์แผง" data-ควอไลเซอร์นาฬิกา>
Lorem Ipsum ...
</ div>
</ div>
<! - เตรียมมูลนิธิ JS ->
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
<ระดับ Div = "ขนาด 4 คอลัมน์แผง" data-ควอไลเซอร์นาฬิกา>
Lorem Ipsum ...
</ div>
<ระดับ Div = "ขนาด 4 คอลัมน์แผง" data-ควอไลเซอร์นาฬิกา>
UT sed ...
</ div>
<ระดับ Div = "ขนาด 4 คอลัมน์แผง" data-ควอไลเซอร์นาฬิกา>
Lorem Ipsum ...
</ div>
</ div>
<! - เตรียมมูลนิธิ JS ->
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
ลอง»
ควอไลเซอร์หน้าจอที่แตกต่างกัน
ในควอไลเซอร์โดยการเพิ่ม 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 เพิ่มค่าเดียวกันของทรัพย์สิน นี้สามารถเชื่อมต่อเข้าด้วยกันเพื่อภาชนะควอไลเซอร์ ซ้อนกันซ้ำแล้วซ้ำอีกควอไลเซอร์ให้แน่ใจว่าพวกเขาจะมีการแข่งขัน:
ตัวอย่าง
<- The แก้วหูตู้คอนเทนเนอร์ ->
<div class = "แถว" ข้อมูล -equalizer = "ครั้งแรก">
<ระดับ Div = "ขนาด 4 คอลัมน์">
<div class = "แผง" ข้อมูล -equalizer นาฬิกา = "ครั้งแรก">
<H3> แผง </ h3>
<! - แก้วหูคอนเทนเนอร์ภายใน แก้วหูตู้คอนเทนเนอร์ ->
<div class = "แถว" ข้อมูล -equalizer = "สอง">
<div class = "แผง" ข้อมูล -equalizer นาฬิกา = "สอง">
<h3> ซ้อนแผง </ h3 >
<p> Lorem Ipsum ... </ p>
</ div>
<div class = "แผง" ข้อมูล -equalizer นาฬิกา = "สอง">
<h3> ซ้อนแผง </ h3 >
<p> Lorem Ipsum ... </ p>
</ div>
<div class = "แผง" ข้อมูล -equalizer นาฬิกา = "สอง">
<h3> ซ้อนแผง </ h3 >
<p> Lorem Ipsum ... </ p>
</ div>
</ div>
<! - End ซ้อนแก้วหูตู้คอนเทนเนอร์ - >
</ div>
</ div>
<ระดับ Div = "ขนาด 4 คอลัมน์">
<div class = "แผง" ข้อมูล -equalizer นาฬิกา = "ครั้งแรก">
<H3> แผง </ h3>
<p> Ut enim ... </ p>
</ div>
</ div>
<ระดับ Div = "ขนาด 4 คอลัมน์">
<div class = "แผง" ข้อมูล -equalizer นาฬิกา = "ครั้งแรก">
<H3> แผง </ h3>
<p> Lorem Ipsum .... </ p>
</ div>
</ div>
</ div>
<div class = "แถว" ข้อมูล -equalizer = "ครั้งแรก">
<ระดับ Div = "ขนาด 4 คอลัมน์">
<div class = "แผง" ข้อมูล -equalizer นาฬิกา = "ครั้งแรก">
<H3> แผง </ h3>
<! - แก้วหูคอนเทนเนอร์ภายใน แก้วหูตู้คอนเทนเนอร์ ->
<div class = "แถว" ข้อมูล -equalizer = "สอง">
<div class = "แผง" ข้อมูล -equalizer นาฬิกา = "สอง">
<h3> ซ้อนแผง </ h3 >
<p> Lorem Ipsum ... </ p>
</ div>
<div class = "แผง" ข้อมูล -equalizer นาฬิกา = "สอง">
<h3> ซ้อนแผง </ h3 >
<p> Lorem Ipsum ... </ p>
</ div>
<div class = "แผง" ข้อมูล -equalizer นาฬิกา = "สอง">
<h3> ซ้อนแผง </ h3 >
<p> Lorem Ipsum ... </ p>
</ div>
</ div>
<! - End ซ้อนแก้วหูตู้คอนเทนเนอร์ - >
</ div>
</ div>
<ระดับ Div = "ขนาด 4 คอลัมน์">
<div class = "แผง" ข้อมูล -equalizer นาฬิกา = "ครั้งแรก">
<H3> แผง </ h3>
<p> Ut enim ... </ p>
</ div>
</ div>
<ระดับ Div = "ขนาด 4 คอลัมน์">
<div class = "แผง" ข้อมูล -equalizer นาฬิกา = "ครั้งแรก">
<H3> แผง </ h3>
<p> Lorem Ipsum .... </ p>
</ div>
</ div>
</ div>
ลอง»