Html 浮动时的DIV高度问题_Html

Html 浮动时的DIV高度问题

html

Html 浮动时的DIV高度问题,html,Html,嗨，我有一个问题，我想不出一个浮动div。我知道很多人都有同样的问题，但我没有找到一个正常的解决办法。也许你能帮我？我希望左边的div随高度增加，而右边的div随高度增加。右边的那个会动态增长，因为其中的文本或其他内容会有不同的大小代码如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Docu

嗨，我有一个问题，我想不出一个浮动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>


无标题文件
#内容
{
宽度：600px；
高度：自动；
溢出：隐藏；
背景色：#FF3399；
}
#内容1
{
宽度：300px；
背景色：#3333CC；
浮动：左；
}
#内容2
{
宽度：300px；
溢出：隐藏；
背景色：#CCFF66；
}
1.
2.

这是永恒的css列高度问题。使用纯css，但我很高兴使用这个jQuery插件：

这不是处理问题的“正确”方法，但以我的经验，这是唯一不会让你发疯的方法。

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

可以吗

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

无标题文件


#内容
{
宽度：600px；
高度：自动；
溢出：隐藏；
背景色：#FF3399；
}
#内容1
{
宽度：300px；
背景色：#3333CC；
}
#内容2
{
宽度：300px；
溢出：隐藏；
浮动：对；
背景色：#CCFF66；
}
2.










1.

这个解决方案就是我一直在寻找的，但我有一个非常重要的问题，我想在内容1的底部放置一个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>


#内容
{
宽度：600px；
高度：自动；
溢出：隐藏；
背景色：#FF3399；
}
#内容1
{
宽度：300px；
背景色：#3333CC；
}
#内容2
{
宽度：300px；
溢出：隐藏；
浮动：对；
背景色：#CCFF66；
}

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