ここにあなたの問題に対処する方法です：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をインラインで追加、または
h6 {
bottom:10px;
}
としてCSSでクラスを作るために、それが好きです。説明すると、テキストは常にimg-boxの下部から10ピクセルになります。
いずれか、または画像をコンテナの背景画像にして、すべてを所定のサイズに設定します。
これはどのように見えるのですか？それがあなたの138pxに収まるには大きすぎる場合は、イメージを縮小する必要がありますか？これらはコンテンツイメージではないので、代わりに背景イメージとして使用してみましょう。 –
私は常にそのウィンドウに収まるはるかに小さな画像を持っています。それらを背景画像で使用しますか？ –
アンカーの@caramba見出しやその他のブロック要素はHTML5の下で許可されています –