Come avvolgere il testo attorno a un'immagine utilizzando HTML / CSS

106

Voglio progettare un blocco di testo come la seguente immagine:

inserisci qui la descrizione dell'immagine

Domanda se questo è possibile?

html css

— user1780343
fonte

1

possibile duplicato del testo a

— capo

Stai cercando di avvolgere il testo attorno a un'immagine come nei normali <p>tag e così via, ma hai anche menzionato <textarea>, che potrebbe essere un problema completamente diverso. Perché non pubblichi il tuo HTML se ne hai qualcuno? Grazie.

— Marc Audet

1

Sì, dovresti semplicemente far fluttuare l'immagine php a sinistra e il testo verrà avvolto attorno ad essa :-)

— Jack Tuck

Tutti questi commenti e nessuna risposta accettata ...

— Dave Kanter

111

devi al floattuo contenitore di immagini come segue:

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

VIOLINO

http://jsfiddle.net/kYDgL/

— BeNdErR
fonte

51

Con le forme CSS puoi fare un ulteriore passo avanti oltre a far scorrere il testo attorno a un'immagine rettangolare.

Puoi effettivamente avvolgere il testo in modo che assuma la forma del bordo dell'immagine o del poligono attorno al quale lo stai avvolgendo.

DEMO FIDDLE (Attualmente in lavorazione su 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>

Espandi lo snippet

Inoltre, ecco una buona lista di articoli a parte sulle forme CSS

— danielD
fonte

1

C'è qualche opzione su come avvolgere "INTORNO" l'oggetto in modo che l'oggetto possa essere nel mezzo?

— redestructa

@redestructa controllare CSS exclusions.See mio post: stackoverflow.com/a/19895616/703717 E 'attualmente supportata solo in IE - caniuse.com/#feat=css-exclusions

— DanielD

20

Aggiunta alla risposta di BeNdErR :
l'elemento "altro TESTO" dovrebbe avere float:none, come:

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

Espandi lo snippet

— T.Todua
fonte

questo è l'unico modo in cui potrei farlo funzionare .. E la soluzione più pulita.

— andygoestohollywood

galleggiante: nessuno è stato ciò che mi ha salvato! Continuò a cercare di galleggiare: a destra il secondo elemento senza alcun risultato.

— bkunzi01

11

Se la dimensione dell'immagine è variabile o il design è reattivo , oltre a avvolgere il testo, puoi impostare una larghezza minima per il paragrafo per evitare che diventi troppo stretto.
Fornisci uno pseudo-elemento CSS invisibile con la larghezza di paragrafo minima desiderata. Se non c'è abbastanza spazio per adattare questo pseudo-elemento, allora verrà spinto verso il basso sotto l'immagine, portando con sé il paragrafo.

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

— Jithin B
fonte

Penso che la tua risposta possa risparmiarmi un po 'di pancetta. Avevo un problema con le immagini flottanti a sinistra che si accumulavano in un design reattivo. Con la larghezza dell'immagine predefinita del 30% e le immagini su entrambi i lati, a volte potrei avere una colonna di testo larga solo 4 caratteri.

— Sherwood Botsford