Question

此jQuery脚本在网页中的所有列上创建相等的列高度。如何将jQuery修改为每行的相等列高。即有四个不同高度的一半。

jQuery Equal Height Columns

jQuery(document).ready(function() {
    var highestBox = 0;
    $('.one-half').each(function() {
        if ($(this).height() > highestBox)
            highestBox = $(this).height();
    });

    $('.one-half').height(highestBox);
});

HTML列

<div class="one-half first">
    Eyebrow Tidy: $18.00
    Eyebrow Shape: $24.00
    Lip: $12.00
    Chin: $15.00
</div>
<div class="one-half">
    Side facial: $15.00
    Underarm: $25.00
    Full arm: $35.00
    Half arm: $22.00
    Chest: $46.00
    Back: $40.00
</div>
<div class="one-half first">
    Lip: $12.00
    Chin: $15.00
</div>
<div class="one-half">
    Back: $40.00
</div>

Answer 1

很难说出列和行的含义。我假设你有一些CSS将.one-half - divs放在一起。

每行需要一个包装容器

.row {
  background: red;
  width: 300px;
}
.one-half {
  margin: 1em;
  background: yellow;
  display: inline-block;
  width: 100px;
}

<div class="row">
  <div class="one-half first">
    Eyebrow Tidy: $18.00
    Eyebrow Shape: $24.00
    Lip: $12.00
    Chin: $15.00
  </div>
  <div class="one-half">
    Side facial: $15.00
    Underarm: $25.00
    Full arm: $35.00
    Half arm: $22.00
    Chest: $46.00
    Back: $40.00
  </div>
</div>
<br /><br />
<div class="row">
  <div class="one-half first">
    Lip: $12.00
    Chin: $15.00
  </div>
  <div class="one-half">
    Back: $40.00
  </div>
</div>

row容器的高度应自动与最高列one-half一起使用。无需任何计算。

每行的列高相同 - Genesis Columns

1 个答案: