javascript - 无法使用 jQuery 均衡 anchor 高度

Question

好像我的 JavaScript 没有听我的。我只是想将所有 anchor 的高度设置为等于这些 anchor 的最高高度。

HTML

<div class="col-md-4 col-sm-6 col-xs-12 product-items" ng-repeat="products in products">
    <div class="product">
        <h3>{{products.title}}</h3>
        <img ng-href="" ng-src="{{products.thumbimg}}" alt="{{products.imgalt}}">
        <a href="#">{{products.link}}</a>
        <p>{{products.price | currency : ""}} BGN</p>
        <p>Free Shiping</p>
        <button>BUY</button>
    </div>
</div>

JS

(function () {
    var app = angular.module("app", []);
    var MainController = function ($scope, $http, $filter) {
        ...
        ...
        ...
        /* Jquery */
        var maxHeight = 0;
        $("div .product a").each(function () {
            if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
        });

        $("div .product a").height(maxHeight);


    };
    app.controller("MainController", MainController);
} ());

如何在 h1、h2 或 h3 html 元素上设置相等的高度

Answer 1

<a>元素是内联元素，您无法使用 height 更改内联元素的高度在CSS中。您必须通过将以下 CSS 代码添加到您的页面来将它们更改为内联 block 元素:

a {
  display: inline-block;
}