logo标签列表

当浮动时DIV高度问题

html
3

嗨，我有一个关于浮动div的问题，无法解决。我知道很多人都有同样的问题，但我没有找到一个正常的解决方案。也许你可以帮助我吗？我希望左侧的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>
4个回答
1
0

我通常使用这段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'));
0

可以吗？

<!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>

0

这个解决方案是我一直在寻找的，但我有一个非常重要的问题：我想在content1底部放置一个具有固定高度和宽度的div，但我无法做到，因为该div就是不会在那里。该div也可以是一个图像，您不能使用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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接