浮动DIV高度问题

您好我有一个问题，我想不通浮动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>

来源

2010-07-06 RED

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

这不是“正确”的方式来处理它，但在我的经验，这是唯一的方式，不会让你疯了。

来源

2010-07-06 12:48:39 joeynelson

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

来源

2010-07-06 12:56:34

可以吗？

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

来源

2010-07-06 13:23:10 T1000

这个解决办法是什么我一直在寻找，但我有我想放置一个div在与内容1的底部一个非常重要的问题一个静态的高度和宽度，但我不能这样做，因为该div只是不会去那里的div也可以是一种行为，你不能使用position：absolute，因为content1 div高度不会是静态的，所以它的div不会一直在一个地方。我使用的解决方案帮了我很多，我只是想在content1的底部添加div。所以看起来这个content1在顶部有两个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高度的问题，我提到使用此代码是非常重要的

来源

2010-07-07 08:20:48 RED

浮动DIV高度问题

回答

相关问题