Question

使用此标记：

<div class="wrapper">
    <article>A</article>
    <article>B</article>
    <article>C</article>
    <article>D</article>
    <article>E</article>
    <article>F</article>
</div>

我如何设计它的样式：

|-------|---------|
|       |         |
|   A   |    B    |
|       |         |
|-------|---------|
|       |         |
|   C   |    D    |
|       |         |
|-------|---------|
|       |         |
|   E   |    F    |
|       |         |
|-------|---------|

这样每对应该有相同的高度？高度应来自具有较长内容的文章，即如果 C 中的内容长于 D ，则 D 应与 C 的高度匹配。

到目前为止，我所尝试的是漂亮的旧漂浮物，但由于它漂浮了，因此它具有取决于内容的可变高度。

我也搜索过类似的东西，但我发现的是固定高度的列，只是隐藏了额外的内容。

Answer 1

使用相同高度的函数来实现

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}


$(document).ready(function() {
    equalHeight($(".recent-article"));

});

// HTML

<div class="wrapper">
    <article class="recent-article">A</article>
    <article class="recent-article">B</article>
    <article class="recent-article">C</article>
    <article class="recent-article">D</article>
    <article class="recent-article">E</article>
    <article class="recent-article">F</article>
</div>

Answer 2

最好你必须为此做好准备。

<div class="wrapper">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <article class="recent-article">A</article>
        </td>
        <td>
            <article class="recent-article">B</article>
        </td>
    </tr>
    <tr>
        <td>
            <article class="recent-article">C</article>
        </td>
        <td>
             <article class="recent-article">D</article>
        </td>
    </tr>
    <tr>
        <td>
            <article class="recent-article">E</article>
        </td>
        <td>
            <article class="recent-article">F</article>
        </td>
    </tr>
    </table>

两列和平等高度

2 个答案: