Problème de hauteur de DIV quand flottait

Salut J'ai un problème en supposant un div flottant que je ne peux pas comprendre. Je sais que beaucoup de gens ont le même problème mais je n'ai pas trouvé de solution normale. peut-être que tu peux m'aider ? Je veux que le div à gauche grandisse sur sa hauteur quand celui de droite va grandir. Celui de droite se développera dynamiquement, parce que le texte ou d'autres choses auront des tailles différentes.Problème de hauteur de DIV quand flottait

Voici le code:

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

Source

2010-07-06 RED

Ceci est la question de la hauteur éternelle colonne css. There are some (painful) ways to work around it avec css pur, mais j'ai été heureux en utilisant ce plugin jQuery: http://www.cssnewbie.com/equalheights-jquery-plugin/

Ce n'est pas la «bonne» façon de le gérer, mais dans mon expérience, c'est la seule façon qui ne vous rendra pas fou.

Source

2010-07-06 12:48:39 joeynelson

J'utilise habituellement ce bout de 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'));

Source

2010-07-06 12:56:34

Est-ce ok?

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

Untitled Document

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

Source

2010-07-06 13:23:10 T1000

cette solution est ce que je cherchais, mais j'ai une question très importante que je veux placer un div au fond du content1 avec une hauteur statique et la largeur, mais je ne peux pas le faire parce que la div ne va pas y aller le div peut également être un imgage, vous ne pouvez pas utiliser la position: absolue parce que la hauteur content1 div ne sera pas statique de sorte que le div dans ce ne sera pas dans un endroit tout le temps. J'utilise une solution qui m'a beaucoup aidé et je veux juste ajouter que div au fond sur content1. Donc, il semble que ce contenu1 a 2 divs un en haut comme premier et l'autre en bas. Il est très important d'utiliser ce code, car il résout le problème de la hauteur div que je l'ai mentionné:

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

Source

2010-07-07 08:20:48 RED

Problème de hauteur de DIV quand flottait

Répondre

Questions connexes