Question

我的问题如下：我的内容由彼此相邻的两个div组成 - 一个用于内容，另一个用于左侧。在内容div中有不同的文章。假设有一篇文章是50px，下一篇是350px，最后一篇是600px。我希望每当一篇文章在内容div中开始时，就会在左侧div中显示同一高度的小文本。所以在这种情况下，我希望文本在50px下降，350和600px。但我不想静静地这样做。如果文章的长度发生变化，我希望这些小文本也能转移到相同的高度。

现在，我尝试使用jQuerys高度，但它似乎没有完成这项工作。我不是jQuery的专家。任何有想法的人都会非常感激！

谢谢！

Answer 1

您是否尝试过jQuery equal heights plugin？

有一个demo on their website会告诉你它的作用。

使用插件，代码变得微不足道：

$(document).ready(function() {
    $(".columns").equalHeights();
});

Answer 2

你可以做这样的事情

获取动态div的高度

var contentHeight=$('#ContentDiv').height();

//设置另一个div的高度

$('#leftDiv').css('height',contentHeight);

Answer 3

这是我在任何当前网站上使用的内容..

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

equalHeight($('div.equal'));

Answer 4

如果您希望div的高度相同，请尝试http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks。它对我来说很完美。

但据我所知，你想要的东西如下：

Article 1       fgsdgsgldsfdsfsdfsdfsdf
                fsdfdsfdsfsdfsdfsdfsdfd
                dsfdsfdsfdsfsdfdsfsdfdd

Article 2       fdsfsdfsdfsdfsdfsdfsdfs
                dsfdsfdsfdsfsdfdsfdsfds

Article 3       fdsfdsfdsfdsfdsfsdfsdfd
                dfdsfsdfsdfsdfsdfdsfsdf
                dfdsfsdfsdfdsfsdfdsfsdf
                dfdsfdsfdsfdsfdsfdsfdsf

如果是这种情况，请使用以下内容。我发现很难想出一个解决方案，但是它直接打击了我的眼睛！

<div>
    <div style="float: left; width: 20%;"><div style="apply padding, margin etc here">Article 1</div></div>
    <div style="float: right; width: 80%;"><div style="apply padding, margin etc here">Article 1 body</div></div>
    <div style="clear: both"><!--This stretches the parent div to wrap the floating divs--></div>
</div>
<div>
    <div style="float: left; width: 20%;"><div style="apply padding, margin etc here">Article 2</div></div>
    <div style="float: right; width: 80%;"><div style="apply padding, margin etc here">Article 2 body</div></div>
    <div style="clear: both"><!--This stretches the parent div to wrap the floating divs--></div>
</div>
<div>
    <div style="float: left; width: 20%;"><div style="apply padding, margin etc here">Article 3</div></div>
    <div style="float: right; width: 80%;"><div style="apply padding, margin etc here">Article 3 body</div></div>
    <div style="clear: both"><!--This stretches the parent div to wrap the floating divs--></div>
</div>
<div>
    <div style="float: left; width: 20%;"><div style="apply padding, margin etc here">Article 4</div></div>
    <div style="float: right; width: 80%;"><div style="apply padding, margin etc here">Article 4 body</div></div>
    <div style="clear: both"><!--This stretches the parent div to wrap the floating divs--></div>
</div>

编辑：你将填充和边距等应用于嵌套在浮动div中的div的原因是它会将右边的div分流到下一行。也就是说，如果你在左边应用填充，那么实际上宽度为20％+填充，右边的宽度为80％。显然这增加了100％+填充，浏览器不喜欢这个。几个星期前我遇到了这个问题但添加了另一个我应用填充/边距等的div就完美了。

如果你想要边框，那么我认为这也必须应用于儿童div，但我想不出一个简单的方法来使标题和身高相等，除了使用网站我把链接以上 - 但这需要很多工作。

如何在不同的div中实现相同的文本高度？

4 个答案: