Droite Float et conteneurs div

J'ai 3 divs dans un conteneur div. Le premier est flottant à gauche, le second à droite et le dernier au centre. Cela crée 3 divs approximativement égaux à travers un div conteneur.Droite Float et conteneurs div

Dans chacune de ces divs je place une image de hauteurs variables. Ensuite, il y a un div séparé pour s'asseoir en dessous du div conteneur qui sera la pleine largeur (appelez-le description div). Je souhaite que le conteneur div s'étende jusqu'à la hauteur de la plus grande image div afin que la description divisse bien sous les images. Actuellement cela fonctionne quand la gauche a flotté et les divs du milieu contiennent la plus grande image mais pas pour la div flottante droite. Je ne peux pas voir pourquoi ou ce que je manque d'aide serait très apprécié.

REMARQUE: j'essaie de le faire sans utiliser de valeurs absolues, mais des pourcentages. Donc je ne veux pas déclarer une hauteur absolue au conteneur div! Aussi clear ne fonctionnera pas car cela est simplifié et il y a en fait beaucoup d'autres conteneurs div autour de tout cela, etc, sauf si vous pouvez effacer seulement les flottants dans le div imbriqué ci-dessus.

Voici le code:

<html> 
<head> 
    <style> 
     #b_pics { 
      border: 2px solid grey; 
      width: 100%; 
     } 
     #b_pic1 { 
      border: 0px solid grey; 
      float:left; 
      width:33%; 
     } 
     #b_pic2 { 
      border: 0px solid grey; 
      margin: 0px auto; 
      width: 33% 
     } 
     #b_pic3 { 
      border: 0px solid grey; 
      float:right; 
      width:33%; 
     } 
     #b_website { 
      border: 1px solid grey; 
      width:100%; 
     } 
    </style> 
</head> 
<body> 
    <div id='b_pics'> 
     <div id='b_pic1'> 
      Image 1 here  
     </div> 
     <div id='b_pic3'> 
      Image 3 here    
     </div> 
     <div id='b_pic2'> 
      Image 2 here      
     </div> 
    </div> 
    <div id='b_website'> 
     Line of text goes here 
    </div> 
</body>

Merci à l'avance pour toute aide, en essayant de garder les poils des thats laissé dans ma tête!

Source

2009-03-30 Anonymous

On dirait que quelqu'un a été dans une virée de downvoting et downvoted la question et toutes les réponses. Bizarre. – SpoonMeiser

-1

Donnez this un tir. Rien n'est codé en dur, et il devrait faire ce que vous voulez.

Source

2009-03-30 21:20:19

Un élément contenant ne s'étire pas pour s'adapter aux divs flottantes. Dans votre exemple, la div contenant n'a pas de contenu réel et sera donc 0 pixels de haut. Essayez de changer la couleur de la bordure ou de l'arrière-plan pour illustrer cela.

Vous pouvez forcer un élément à être inférieure à tout ce divs flottant en donnant le style:

clear: both;

Vous pouvez également effacer juste à gauche ou à droite divs flottant.

Vous pouvez ajouter une div vide après vos trois divs d'image qui ont ce style, pour que le conteneur b_pics s'étire pour accueillir les éléments flottants, ou vous pouvez simplement rendre b_website div à la fois.

Source

2009-03-30 21:22:05 SpoonMeiser

merci pour les commentaires, je suis en train de les faire travailler semble que je suis très proche.Je posterai un code plus détaillé si je continue d'avoir des problèmes. THnaks –

Je suis totalement d'accord avec la réponse de SpoonMeiser. J'ai eu le même problème (seulement avec IE faire) et en ajoutant un clair: les deux (div dans mon cas) est la seule solution qui semble fonctionner.

Source

2009-11-05 07:08:26

L'explication de SpoonMeiser est correcte. Voici un code qui devrait fonctionner pour vous. Essentiellement, j'ai ajouté une div vide avec "clear: both" à la fin de votre conteneur div. Cela force le conteneur à occuper l'espace des divs flottants qu'il contient. Cela vaut mieux que de rendre le div #b_website "clear: both" (suggestion alternative de SpoonMeiser) car cela ferait apparaître le div #b_website au bon endroit mais ne forcerait pas la bordure #b_pics à entourer les divs flottantes.

<div id='b_pics'> 
    <div id='b_pic1'> 
     Image 1 here</div> 
    <div id='b_pic3'> 
     Image 3 here 
    </div> 
    <div id='b_pic2'> 
     Image 2 here 
    </div> 
    <div style="clear:both;"></div> 
</div> 
<div id='b_website'> 
    Line of text goes here 
</div>

J'espère que cela aide?

Source

2013-07-30 11:48:10 Flam

Droite Float et conteneurs div

Répondre

Questions connexes