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

106

Je souhaite créer un bloc de texte comme l'image suivante:

entrez la description de l'image ici

Question si cela est possible?

html css user1780343
la source
1
duplication possible du texte d'habillage autour d'une image avec indentation et justification
mavrosxristoforos
Essayez-vous d'enrouler du texte autour d'une image comme dans des <p>balises ordinaires , etc., mais vous l'avez également mentionné <textarea>, ce qui pourrait être un problème totalement différent. Pourquoi ne publiez-vous pas votre HTML si vous en avez? Je vous remercie.
Marc Audet
1
Ouais, vous feriez simplement flotter l'image php vers la gauche, et le texte s'enroulera autour d'elle :-)
Jack Tuck
Tous ces commentaires et aucune réponse acceptée ...
Dave Kanter

Réponses:

111

vous devez floatvotre conteneur d'image comme suit:

HTML

<div id="container">
    <div id="floated">...some other random text</div>
    ...
    some random text
    ...
</div>

CSS

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

VIOLON

http://jsfiddle.net/kYDgL/

BeNdErR
la source
51

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

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

DEMO FIDDLE (Travaille actuellement sur le 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;
}
<div class="oval"><span>PHP</span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Développer l'extrait

Aussi, voici une bonne liste à part article sur les formes CSS

Danield
la source
1
Existe-t-il une option pour envelopper "AUTOUR" l'objet afin que l'objet puisse être au milieu?
redestructa
@redestructa consultez CSS exclusions.See mon post: stackoverflow.com/a/19895616/703717 Il est actuellement pris en charge que dans IE - caniuse.com/#feat=css-exclusions
DanielD
20

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

    <div style="width:100%;">
        <div style="float:left;width:30%; background:red;">...something something something  random text</div>
        <div style="float:none; background:yellow;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
    </div>
Développer l'extrait

T.Todua
la source
c'est la seule façon dont je pourrais faire fonctionner cela .. Et la solution la plus propre.
andygoestohollywood
float: rien ne m'a sauvé! J'ai essayé de flotter: à droite le deuxième élément en vain.
bkunzi01
11

Si la taille de l' image est variable ou si le design est réactif , en plus d'habiller le texte, vous pouvez définir une largeur minimale pour le paragraphe afin d'é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 accueillir ce pseudo-élément, il sera poussé vers le bas sous l'image, emportant le paragraphe avec lui.

#container:before {
  content: ' ';
  display: table;
  width: 10em;    /* Min width required */
}
#floated{
    float: left;
    width: 150px;
    background: red;
}
Jithin B
la source
Je pense que ta réponse me fera économiser du bacon. J'avais un problème avec les images flottantes à gauche qui s'empilaient dans un design réactif. Avec une largeur d'image par défaut de 30% et des images des deux côtés, je pouvais parfois avoir une colonne de texte de seulement 4 caractères de large.
Sherwood Botsford