やあ、
私のHTMLとCSSでいくつかの（理解している）問題が発生しています。
親DIV（.group）内に複数のDIV（.item）があります。これらの子DIVの高さは、動的なコンテンツによって異なります。
静的コンテンツを使用した実例：http： //jsfiddle.net/YfDWL/
HTML：
<div class="group">
<div class="item">
<div class="item-title">item 1</div>
<div class="item-tag">tag1</div>
</div>
<div class="item">
<div class="item-title">item 2</div>
<div class="item-tag">tag1</div>
<div class="item-tag">tag2</div>
<div class="item-tag">tag3</div>
<div class="item-tag">tag4</div>
</div>
<div class="item">
<div class="item-title">item 3</div>
<div class="item-tag">tag1</div>
<div class="item-tag">tag2</div>
</div>
</div>
<div class="group">
<div class="item">
<div class="item-title">item 1</div>
<div class="item-tag">tag1</div>
<div class="item-tag">tag2</div>
<div class="item-tag">tag3</div>
<div class="item-tag">tag4</div>
</div>
<div class="item">
<div class="item-title">item 2</div>
<div class="item-tag">tag1</div>
<div class="item-tag">tag2</div>
</div>
<div class="item">
<div class="item-title">item 3</div>
<div class="item-tag">tag1</div>
</div>
</div>
CSS：
.group {
margin: 30px;
padding: 10px;
border: 1px dashed black;
}
.item {
display: inline-block;
border: 1px solid black;
width: 100px;
margin-right: 10px;
}
.item-title {
text-align: center;
font-style: italic;
font-weight: bold;
}
私が達成したいのは、グループ内のすべてのアイテムDIVが同じ高さであり、上部に配置されている必要があるということです。これは私にいくつかの問題をもたらします：
アラインメント
グループの一番上にあるすべてのアイテムDIVをアラインメントするにはどうすればよいですか？例でわかるように、現在、それらは下部に配置されています...高さ
他の質問で見たように、これは純粋なHTML/CSSでは実行できないようです。したがって、要素の高さを修正するために、JQueryで少しJSを使用することにしました。
実例： http： //jsfiddle.net/YfDWL/1/
JavaScript：
$(window).load(function() {
"use strict";
var maxHeight;
// Iterate through every group
$('.group').each(function(idx, group) {
maxHeight = 0;
// Iterate through every item of the group and save the max height
$(group).find('.item').each(function(idx, item) {
var height = $(item).height();
if (!maxHeight || (height > maxHeight)) {
maxHeight = height;
}
});
// Set the max height to all items inside the group
if (maxHeight) {
$(group).find('.item').css('height', maxHeight);
}
});
});
ご覧のとおり、これは問題なく機能していますが、位置合わせにはまだ問題があります...
私が今知りたいのは、アイテムの配置がどこから来ているのか、そしてどのようにしてすべてのアイテムをグループのトップに置くことができるのかということです。
さらに、「同じ高さ」の問題をより精力的に解決でき、おそらくJSがまったくなくても、ここで提案をしたいと思います...
ありがとう＆よろしく、
mik