Désactiver l'habillage de texte autour des images flottantes

J'ai une page qui ressemble à ceci:

<div>
<p> This text appears above the image</p>
<!-- I know the <div><p> construction is superfluous. I was just trying things out -->
</div>

<div style="display: block; width: 100%; clear: both;">

   <img class="left" alt="Img1" src="img1.jpg" alt="" width="242" height="181" />
   <img class="right" alt="Img2" src="img2.jpg" alt="" width="242" height="181" />

</div>

<div>
<p> This text appears between those images. I want it to display below them.</p>
</div>

Chaque image a ce CSS:

.left {
   float: left;
   margin-right: 5px;
}
.right {
   float: right;
   margin-left: 5px;
}

Comment puis-je faire en sorte que ces deux images flotter à côté de l'autre, mais le texte ne permet pas de les envelopper dans un entre ces images?

ASCII art de la page en cours:

my text my text my text my textmy text
my text my text my textmy text my text

--------- text is wrapping ---------
|  IMG  | text is wrapping |  IMG  |
--------- text is wrapping --------- 

my text my text my text my textmy text
my text my text my textmy text my text

Belle ASCII art de ce que je désire:

my text my text my text my textmy text
my text my text my textmy text my text

---------                  ---------
|  IMG  |                  |  IMG  |
---------                  --------- 

text is wrapping text is wrapping text
is wrapping

my text my text my text my textmy text
my text my text my textmy text my text

OriginalL'auteur poundifdef | 2011-04-10

  1. 9

    Je recommanderais ceci:

    <div style="overflow: hidden; width: 100%;">
    <!-- floated images -->
</div>

    Son un peu plus propre dans mon monde 🙂

    overflow: auto serait trop de travail. Il est beaucoup plus propre balisage.
    simple comme bonjour, et je venais de passé une heure à essayer de jouer avec les divers attributs CSS. Merci beaucoup!
    Très propre, bon travail.

    OriginalL'auteur janhartmann

  2. 4

    Vous devez insérer une autre div après votre image-div, qui efface les deux flotteurs... comme ceci:

    <div>
   <!-- Your images go here -->
</div>
<div style="clear: both;"></div>
<p>your text</p>

    Edit: Voir mon commentaire, quel serait l'avantage de la passation de la compensation div à l'intérieur de la div en enveloppant les images.

    super d'avoir ce truc dans mon arsenal. l'apprécier!
    Vous pourriez également avoir ajouté la div à l'intérieur la div pour vos images, qui ferait en sorte, que la div en enveloppant les images a la même hauteur que les images (par exemple, si vous souhaitez utiliser une couleur d'arrière-plan)

    OriginalL'auteur Michael Rose

  3. 2

    De compensation de la div contenant des objets flottants ne fonctionne pas.

    Essayez de placer entre vos images div et le conteneur de texte div:

    <div class="clear"></div>

    Et de définir les clear classe de la manière suivante:

    .clear { clear:both; }


    P. S Après l'obtention d'un deuxième haut-vote sur cette question et avant que j'ai fini par obtenir le commentaire en déclarant contraire à ma réponse: l'effacement du contenant div devrait de travail, mais dans mon expérience n'en est rien; il y a dans de rares cas, très propre code HTML, je peux dire qu'il a fait, mais en général, et je ne sais pas si cela a à voir avec une technique particulière concepteurs ont utilisé dans le passé, nous avons dû effacer avec un autonome div après le conteneur.

    OriginalL'auteur Grant Thomas