Penyamaan Asas


Foundation Equalizer (Equalizer)

Kita boleh menambah atribut data-equalizer pada elemen bekas dan menambah atribut data-equalizer-watch pada setiap elemen anak untuk mencipta penyamaan pada ketinggian yang sama. Unsur yang paling tinggi menentukan ketinggian unsur-unsur lain.

Nota: Peluncur memerlukan JavaScript. Jadi anda perlu memulakan oundation JS:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

<div class="row" data-equalizer>
  <h2>Foundation 均衡器(</h2>
  <p>相等高度容器:</p>
  <div class="medium-4 columns panel" data-equalizer-watch>
      <p>php中文网 --  php中文网！！</p>
      <p>php中文网 --  php中文网！！</p>  
      <p><strong>我是最高的元素。其他元素使用我的搞定。</strong></p> 
  </div>
  <div class="medium-4 columns panel" data-equalizer-watch>
      <p>php中文网 --  php中文网！！</p>
      <p>php中文网 --  php中文网！！</p>  
  </div>
  <div class="medium-4 columns panel" data-equalizer-watch>
      <p>php中文网 --  php中文网！！</p>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Penyama untuk skrin berbeza

Tetapkan ketinggian yang sama untuk saiz skrin yang berbeza dengan menambahkan atribut data-equalizer-mq="value" pada penyamaan. Nilai boleh menjadi salah satu daripada berikut:

nilaiPeneranganContoh
sederhana ke atas
值描述实例
medium-up默认。 创建相同高度的容器，宽度大于 40.063em
large-up创建相同高度的容器，宽度大于 64.063em尝试一下
xlarge-up创建相同高度的容器，宽度大于 90.063em尝试一下
xxlarge-up创建相同高度的容器，宽度大于 120.063em尝试一下
Lalai.
Buat bekas dengan ketinggian dan lebar yang sama lebih besar daripada 40.063em

besar-besarBuat bekas dengan ketinggian dan lebar yang sama lebih besar daripada 64.063emCubalah
xlarge- upBuat bekas dengan ketinggian dan lebar yang sama lebih besar daripada 90.063emCubalah
< code>xxlarge-upBuat bekas dengan ketinggian dan lebar yang sama lebih besar daripada 120.063emCubalah

Kandungan bersarangdata-equalizerdata-equalizer-watchTambahkan nilai yang sama pada atribut

dan
. Ini akan disambungkan bersama ke bekas penyamaan. Ulangi penyamaan bersarang beberapa kali untuk memastikan ia sepadan:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row" data-equalizer="first">
  <h2>内嵌均衡器</h2>
  <p>一个均衡容器内嵌入另一个均衡容器:</p>
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
    <h3>面板</h3>
    <div class="row" data-equalizer="second">
      <div class="panel" data-equalizer-watch="second">
        <h3>内嵌面板</h3>
         p>php中文网 --  php中文网！！</p>
      </div>
      <div class="panel" data-equalizer-watch="second">
        <h3>内嵌面板</h3>
        <p>php中文网 --  php中文网！！</p>
      </div>
      <div class="panel" data-equalizer-watch="second">
        <h3>内嵌面板</h3>
        <p>php中文网 --  php中文网！！</p>
      </div>
    </div>
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
    <h3>面板</h3>
       <p>php中文网 --  php中文网！！</p>
       <p>php中文网 --  php中文网！！</p>
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
    <h3>面板</h3>
       <p>php中文网 --  php中文网！！</p>
    </div>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run Instance»

Klik "Run butang instance" untuk melihat kejadian dalam talian<🎜><🎜>