Question

嗨，我有一个问题，我想不起浮动的div。我知道很多人都有同样的问题，但我没有找到正常的解决方案。也许你可以帮帮我？我希望左边的div会增加它的高度，而右边的div会增长它的高度。右边的那个将动态增长，因为其中的文本或其他内容将具有不同的大小。

这是代码：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">


<style>

#content
{
 width:600px;
 height:auto;
 overflow:hidden;
 background-color:#FF3399;
}

#content1
{
 width:300px;
 background-color:#3333CC;
 float:left;
}

#content2
{
 width:300px;
 overflow:hidden;
 background-color:#CCFF66;
}


</style>


</head>

<body>

<div id="content">

    <div id="content1">

    1

    </div>

    <div id="content2">
    2
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>

    </div>

</div>



</body>
</html>

Answer 1

这是永恒的css列高度问题。 There are some (painful) ways to work around it使用纯css，但我很高兴使用这个jQuery插件：http://www.cssnewbie.com/equalheights-jquery-plugin/

这不是处理它的“正确”方式，但根据我的经验，这是唯一不会让你疯狂的方法。

Answer 2

我通常使用这个jQuery片段..

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

equalHeight($('.your-divs'));

Answer 3

可以吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

无标题文档

    <style>

        #content
        {
            width:600px;
            height:auto;
            overflow:hidden;
            background-color:#FF3399;
        }

        #content1
        {
            width:300px;
            background-color:#3333CC;
        }

        #content2
        {
            width:300px;
            overflow:hidden;
            float: right;
            background-color:#CCFF66;
        }


    </style>


</head>

<body>

    <div id="content">



        <div id="content2">
            2
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>

        </div>
        <div id="content1">

            1
            <div style="clear: both"></div>
        </div>


    </div>



</body>

Answer 4

这个解决方案是我正在寻找但我有一个非常重要的问题，我想在content1的底部放置一个div与静态的高度和宽度，但我不能这样做，因为div只是不会去那里div也可以是一个imgage，你不能使用position：absolute因为content1 div高度不会是静态的，所以它中的div不会一直在一个地方。我正在使用一个帮助我很多的解决方案，我只想在content1的底部添加div。所以看起来这个content1有两个div在顶部作为第一个，另一个在底部。使用此代码非常重要，因为它修复了我提到的div高度问题：

    <style>

    #content
    {
        width:600px;
        height:auto;
        overflow:hidden;
        background-color:#FF3399;
    }

    #content1
    {
        width:300px;
        background-color:#3333CC;
    }

    #content2
    {
        width:300px;
        overflow:hidden;
        float: right;
        background-color:#CCFF66;
    }


</style>

<div id="content">



    <div id="content2">
        2
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>

    </div>
    <div id="content1">

        1
        <div style="clear: both"></div>
    </div>


</div>

浮动时的DIV高度问题

4 个答案: