0

嘿那里，

我的一些 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 应该具有相同的高度并且应该在顶部对齐。这给我带来了几个问题：

  1. 对齐
    如何对齐组顶部的所有项目 DIV？现在它们在底部对齐，如您在示例中所见......

  2. 高度
    正如我在其他问题中看到的，这似乎不能用纯 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，我很乐意在这里提出建议......

谢谢和最好的问候，
米克

4

2 回答 2

2

添加vertical-align:top

.item {
    display: inline-block;
    border: 1px solid black;
    width: 100px;
    margin-right: 10px;
    vertical-align:top
}

演示

您可以参考此示例以了解如何在不使用 js 的情况下获得相等的高度。

演示 2

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

于 2012-12-04T09:41:53.630 回答
1

添加 vertical-align:top;到你的.item班级

.item{
vertical-align:top;
}

演示

演示二

于 2012-12-04T09:40:37.330 回答