Garder divs flottant à côté de l'autre lorsque le débordement

Je tenterais d'expliquer mon problème simple afin d'obtenir de bons commentaires :)Garder divs flottant à côté de l'autre lorsque le débordement

Imaginez ce scénario: Un emballage DIV dans les deux DIVs flottantes, à côté de l'autre, avec fixe largeur. Tous avec trop-plein caché. Mais en diminuant la largeur de l'enveloppe (ou en augmentant celle des enfants), la dernière DIV s'est effondrée au lieu de se cacher. S'il vous plaît, consultez le code. Merci beaucoup d'avance!

#wrapper{ 
    width:400px;  
    overflow:hidden; 
    border:1px dashed #0033FF;  
} 
#wrapper .tContent{ 
    width:210px;  
    height:200px; 
    float:left; 
    overflow:hidden;   
} 

HTML: 
<div id="wrapper"> 
<div class="tContent"> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat 
    </p> 
</div> 
    <div class="tContent"> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  </p> 
</div>

Comment résolvez-vous? éviter l'effondrement et garder le flottement et se cacher si nécessaire?

Source

2009-07-15 Teknotica

Ceci est le comportement attendu. Vous aurez besoin d'ajouter un autre div à l'intérieur de votre wrapper avec une largeur fixe assez grande pour accueillir les deux flotteurs.

Exemple:

<div id="wrapper"> 
    <div class="wide"> 
     <div class="tContent"> 
     </div> 
     <div class="tContent"> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 

    var total = 0; 

    $(window).load(function() { 

     $(".tContent").each(function(){ 
      total += $(this).width(); 
     }); 

     $(".wide").width(total); 

    }); 
</script>

Source

2009-07-15 13:46:20 jeroen

Merci pour votre réponse. Ma question est maintenant, imaginez l'emballage est 100% de largeur mais j'ai assez d'enfants à l'intérieur (flottant l'un à côté de l'autre) dépassant cette largeur. Ils vont s'effondrer. Est-il possible de reproduire le même effet caché de débordement comme un div? Merci! – Teknotica

J'ai lu quelque part une solution qui permettait aux enfants d'afficher: inline-block mais je n'arrivais pas à faire fonctionner tous les navigateurs. J'ai donc utilisé jQuery pour définir dynamiquement la largeur de la div fixe (additionnant toutes les largeurs de les enfants). – jeroen

OK, je vais jeter un coup d'oeil alors. Salutations :) – Teknotica

La largeur de vos deux divs internes ne devrait pas être plus la largeur de l'emballage. Pour que ce code fonctionne, .tContent doit avoir une largeur de 200 pixels. Aussi, voir ceci http://www.w3.org/TR/CSS2/box.html

Source

2009-07-15 13:46:27

Garder divs flottant à côté de l'autre lorsque le débordement

Répondre

Questions connexes