Comment habillage de texte autour d'une image à l'aide de HTML/CSS

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

(https://docs.google.com/file/d/0B8gEuF9U3SaENzNsOTdxMmV3Ykk/edit?usp=sharing)

Comment habillage de texte autour d'une image à l'aide de HTML/CSS

Question de savoir si cela est possible?

  • double possible de l'Habillage du texte autour d'une image avec l'indentation et de justifier
  • Êtes-vous essayer de placer du texte autour d'une image comme des <p> balises et ainsi de suite, mais vous avez également mentionné que <textarea>, ce qui pourrait être un tout autre problème. Pourquoi ne pas poster vos HTML, si vous en avez? Je vous remercie.
  • Ouais, vous devriez juste flotter le php de l'image vers la gauche, et le texte s'enroule autour d'elle 🙂
  • Tous ces commentaires et pas de réponse...
InformationsquelleAutor user1780343 | 2013-10-04
  1. 100

    vous avez à float votre image conteneur 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/

    InformationsquelleAutor BeNdErR
  2. 46

    Avec CSS Formes vous pouvez aller un peu plus loin que juste flotter texte autour d'une image rectangulaire.

    Vous pouvez en fait de placer du texte tel qu'il prend la forme du bord de l'image ou de polygone que vous êtes en l'enroulant autour de.

    DÉMO DE VIOLON (Actuellement en train de travailler sur webkit - caniuse)

    CSS:

    .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;
}

    HTML:

    <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>

    Aussi, ici, est un bon liste, en dehors de l'article sur CSS Formes

    InformationsquelleAutor Danield
  3. 19

    Plus BeNdErR's réponse:
    Le "TEXTE" de l'élément doit avoir float:none, comme:

    HTML:

        <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>

    • c'est la seule façon que je pouvais obtenir que cela fonctionne.. Et la solution la plus propre.
    • cela a fonctionné très bien, merci!
    • float:none a été ce qui m'a sauvé! Essaie de float:right le deuxième élément en vain.
    InformationsquelleAutor T.Todua
  4. 10

    Si le la taille de l'image est variable ou de la conception est sensible, en plus de l'emballage de texte, vous pouvez définir un largeur min pour le paragraphe pour éviter de devenir trop étroit.

    Donner un invisible CSS pseudo-élément avec l'minimale souhaitée paragraphe de largeur. Si il n'y a pas assez d'espace pour s'adapter à cette pseudo-élément, alors il sera poussé vers le bas en dessous de l'image, en prenant le point avec elle.

    #container:before {
  content: ' ';
  display: table;
  width: 10em;    /* Min width required */
}
#floated{
    float: left;
    width: 150px;
    background: red;
}
    • Je pense que votre réponse pourrait de me sauver un peu de lardons. J'ai eu un problème avec la gauche flottait images d'empiler jusqu'en responsive design. Avec mon image par défaut de la largeur étant de 30% et les images sur les deux côtés, j'ai pu parfois avoir une colonne de texte à seulement 4 caractères de large.
    InformationsquelleAutor Jithin B