Comment entourer du texte autour d'une image en utilisant HTML/CSS

Question

Je veux concevoir un bloc de texte comme sur l'image suivante :

Question de savoir si cela est possible ?

Answer 1

Vous devez float votre conteneur d'image comme suit:

HTML

    ...quelques autres textes aléatoires
    ...
    quelques textes aléatoires
    ...

CSS

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

FIDDLE

http://jsfiddle.net/kYDgL/

Answer 2

Avec CSS Shapes, vous pouvez aller plus loin que simplement faire flotter du texte autour d'une image rectangulaire.

En fait, vous pouvez envelopper le texte de telle sorte qu'il prenne la forme du bord de l'image ou du polygone autour duquel vous l'enveloppez.

DEMO FIDDLE (Actuellement compatible avec WebKit - caniuse)

.oval {
  width: 400px;
  height: 250px;
  color: #111;
  border-radius: 50%;
  text-align: center;
  font-size: 90px;
  float: left;
  shape-outside: ellipse();
  padding: 10px;
  background-color: MediumPurple;
  background-clip: content-box;
}
span {
  padding-top: 70px;
  display: inline-block;
}

PHP

Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux
  de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique électronique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à
  la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et plus récemment avec des logiciels de mise en page comme Aldus PageMaker incluant des versions de Lorem Ipsum. Le Lorem Ipsum est simplement du faux texte employé dans la composition
  et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a
  pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique électronique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum,
  et plus récemment avec des logiciels de mise en page comme Aldus PageMaker incluant des versions de Lorem Ipsum. Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux
  texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la
  bureautique électronique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et plus récemment avec des logiciels de mise en page comme Aldus
  PageMaker incluant des versions de Lorem Ipsum.

Voici également un bon article de A List Apart sur les formes en CSS

Answer 3

Ajout à la réponse de BeNdErR:
L'élément "other TEXT" doit avoir float:none, comme suit:

        ...quelque chose quelque chose quelque chose texte aléatoire
         texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte

Answer 4

Si la taille de l'image est variable ou si le design est réactif, en plus d'envelopper le texte, vous pouvez définir une largeur minimale pour le paragraphe pour éviter qu'il ne devienne trop étroit.
Donnez un pseudo-élément CSS invisible avec la largeur de paragraphe minimale souhaitée. S'il n'y a pas assez d'espace pour insérer ce pseudo-élément, alors il sera poussé en dessous de l'image, emportant le paragraphe avec lui.

#container:before {
  content: ' ';
  display: table;
  width: 10em;    /* Largeur minimale requise */
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

Answer 5

Mise à jour 2022

J'essayais d'obtenir ce type de résultat avec le moins de code possible. Voici ce qui a fonctionné pour moi.

#wrap {
    margin: 3em 8em;
}
.left {
    float: left;
    margin-right: 1.5em;
}
.right {
    float: right;
    margin-left: 1em;
}
p {
    margin-bottom: 2.5em;
    overflow: hidden; /* this is what keep the 

Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non
mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.

Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non
mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.

Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non
mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.