浮動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高度問題

回答

相關問題