Mettre une Bordure Autour des Éléments Flottants
Dire que j'ai quelque chose comme le code suivant, où je veux afficher un texte entre deux images que je suis flottant à gauche et à droite.
<img src="testImage1.png" alt="Test Image 1" style="float:right;" />
<img src="testImage2.png" alt="Test Image 2" style="float:left;" />
<p>Test Text</p>
Je veux ajouter une bordure autour de deux images et le texte. J'ai essayé de mettre un <div>
autour des 3 des marques ci-dessus et à l'aide de style="border:2px black solid;"
. Bien que cela ajoute une bordure, il semble ne pas prendre les images en compte. C'est, nous obtenons quelque chose comme ce qui suit (à l'aide de StackOverflow et logos Google).
Je devine ce qui se passe parce que les éléments flottants ne sont pas considérés comme faisant partie de la <div>
. Je suis un développeur de logiciel, pas un développeur web, donc je ne suis pas un expert en CSS. Mais je crois me rappeler que les éléments flottants sont des sortes de "l'oubli" d'une certaine manière. Quelqu'un peut-il donner une description détaillée de ce qui se passe et comment le résoudre?
Vous devez vous connecter pour publier un commentaire.
L'ajout d'un
overflow
dans ce cas avec une valeur dehidden
ouauto
voies de recours la question.Vérifier le violon, ci-dessous:
http://jsfiddle.net/XMrwR/
overflow:hidden;
à la<div>
. Il a travaillé. Merci. +1.CSS definition
à retenirDans le CSS, flottaient des éléments à ne pas ajouter de la hauteur à un parent par défaut.
La solution consiste simplement à définir
overflow: hidden
.violon: http://jsfiddle.net/JNets/
Ajoutez cette ligne à votre propriétés CSS: