Question

我有这个代码用于制作导航栏。我正在尝试添加带有文本的图像按钮。问题是图像可能具有不同的大小，因此它们在输出中没有正确居中。

此外，所有图像的标题必须处于同一级别，但情况并非如此。

＆＃13;

ul.nav-icon {
  list-style: none;
  display: block;
  margin: auto;
  width: 800px;
}
ul.nav-icon li {
  float: left;
}
ul.nav-icon a {
  display: inline-block;
  text-decoration: none;
}
ul.nav-icon a:hover {
  background: #4095A6;
}
ul.nav-icon img {
  margin: 0px 0px 0px 0px;
  padding-top: 16px;
  padding-left: 30px;
}
.img-box {
  width: 160px;
  height: 138px;
}
h6 {
  color: white;
  text-align: center;
}

＆＃13;

<ul class="nav-icon">
  <li>
    <a href="#" class="img-box">
      <img src="http://imgur.com/Et4vXHk.png">
      <h6>Families</h6>
    </a>
  </li>
  <li>
    <a href="#" class="img-box">
      <img src="http://i.imgur.com/lubEbTP.png">
      <h6>Families</h6>
    </a>
  </li>
  <li>
    <a href="#" class="img-box">
      <img src="http://i.imgur.com/lubEbTP.png">
      <h6>Families</h6>
    </a>
  </li>
</ul>

＆＃13;

Answer 1

以下是处理问题的方法：https://github.com/smohadjer/sameHeight

这里是你需要包含在你的html中的.js文件。如果它是外部文件会更好。对于任何混淆，此文件也可以在上面的链接中找到，包括缩小/非缩小版本。

;(function ($, window, document, undefined) {
    'use strict';

    var pluginName = 'sameHeight',
        defaults = {
            oneHeightForAll: false,
            useCSSHeight: false
        };

    //private method
    var getHeightOfTallest = function(elms) {
        var height = 0;

        $.each(elms, function() {
            var _h = $(this).outerHeight();

            if (_h > height) {
                height = _h;
            }
        });

        return height;
    };

    // The actual plugin constructor
    function Plugin(element, options) {
        this.$element = $(element);
        this.options = $.extend({}, defaults, options);
        this.init();
    }

    // methods
    var methods = {
        init: function() {
            var self = this;
            self.index = 0;

            self.$elms = self.$element.children();

            self.cssProperty = self.options.useCSSHeight ? 'height' : 'min-height';

            $(window).on('resize.' + pluginName, function() {
                //remove previously set height or min-height
                self.$elms.css(self.cssProperty, '');
                initSameHeight();
            });

            //use setTimeout to make sure any code in stack is executed before
            //calculating height
            setTimeout(function() {
                initSameHeight();
            }, 0);

            function initSameHeight() {
                //if there are adjacent elements
                if (self.getRow(0).length > 1) {
                    self.setMinHeight(0);

                    if (self.options.callback) {
                        self.options.callback();
                    }
                }
            }
        },

        setMinHeight: function(index){
            var self = this;
            var row = self.options.oneHeightForAll ? self.$elms : self.getRow(index);

            var height = getHeightOfTallest(row);

            $.each(row, function() {
                $(this).css(self.cssProperty, height);
            });

            if (!self.options.oneHeightForAll && self.index < self.$elms.length - 1) {
                self.setMinHeight(self.index);
            }
        },

        getRow: function(index) {
            var self = this;
            var row = [];
            var $first = self.$elms.eq(index);
            var top = $first.position().top;

            row.push($first);

            self.$elms.slice(index + 1).each(function() {
                var $elm = $(this);
                if ($elm.position().top === top) {
                    row.push($elm);
                    self.index = $elm.index();
                } else {
                    self.index = $elm.index();
                    return false;
                }
            });

            return row;
        },

        destroy: function() {
            var self = this;
            //remove event handlers
            $(window).off('resize.' + pluginName);

            //remove dom changes
            self.$elms.css(self.cssProperty, '');
            self.$element.removeData('plugin_' + pluginName);
        }
    };

    // build
    $.extend(Plugin.prototype, methods);

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function(options) {
        this.each(function() {
            if(!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }
        });

        return this;
    };

})(jQuery, window, document);

包含上述.js文件后，将此脚本添加到当前页面：

 $('.img-box').sameHeight();

这样可以使所有带图像/文字的方框尺寸相同。

接下来为了确保文本始终位于img-box中的某个点，请添加一些内联css，或者使用css创建一个类

h6 {
    bottom:10px;
}

像素数量可以是您喜欢的任何颜色。为了解释，文本现在总是距离img-box底部10个像素。

或者只是将图像作为容器的背景图像并将它们全部设置为预定的大小。

悬停不使用锚标记html中的图像下方的文本

1 个答案: