So wickeln Sie Text mit HTML / CSS um ein Bild

106

Ich möchte einen Textblock wie das folgende Bild entwerfen:

Geben Sie hier die Bildbeschreibung ein

Frage, ob dies möglich ist?

html css

— user1780343
quelle

1

Mögliches Duplikat von

— Umschließen

Versuchen Sie, Text wie in normalen <p>Tags usw. um ein Bild zu wickeln , aber Sie haben auch erwähnt <textarea>, was ein völlig anderes Problem sein könnte. Warum postest du nicht dein HTML, wenn du welche hast? Danke dir.

— Marc Audet

1

Ja, Sie würden einfach das PHP-Bild nach links schweben und der Text wird es umschließen :-)

— Jack Tuck

Alle diese Kommentare und keine akzeptierte Antwort ...

— Dave Kanter

110

Sie müssen zu floatIhrem Bildcontainer wie folgt:

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

GEIGE

http://jsfiddle.net/kYDgL/

— BeNdErR
quelle

51

Mit CSS-Formen können Sie einen Schritt weiter gehen, als nur Text um ein rechteckiges Bild zu schweben.

Sie können Text so umbrechen, dass er die Form des Bild- oder Polygonrandes annimmt, um den Sie ihn wickeln.

DEMO FIDDLE (arbeitet derzeit am 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>

Erweitern Sie das Snippet

Hier ist auch ein guter Artikel über CSS-Formen

— Danield
quelle

1

Gibt es eine Option, wie das Objekt "UM" gewickelt werden kann, damit sich das Objekt in der Mitte befindet?

— Redestructa

@redestructa Check out CSS-Ausschlüsse. Siehe meinen Beitrag: stackoverflow.com/a/19895616/703717 Es wird derzeit nur in IE unterstützt - caniuse.com/#feat=css-exclusions

— Danield

20

Ergänzung zu BeNdErRs Antwort:
Das "andere TEXT" -Element sollte Folgendes enthaltenfloat:none :

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

Erweitern Sie das Snippet

— T.Todua
quelle

Nur so kann ich das zum Laufen bringen. Und die sauberste Lösung.

— andygoestohollywood

float: keiner hat mich gerettet! Habe versucht zu schweben: Richtig das zweite Element ohne Erfolg.

— bkunzi01

11

Wenn die Bildgröße variabel ist oder das Design ist ansprechbar , zusätzlich zu dem Textumbruch können Sie eine Set min Breite für den Absatz zu vermeiden , ist es auch zu verengen.
Geben Sie ein unsichtbares CSS-Pseudoelement mit der gewünschten minimalen Absatzbreite an. Wenn nicht genügend Platz für dieses Pseudoelement vorhanden ist, wird es unter das Bild gedrückt und der Absatz mitgenommen.

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

— Jithin B.
quelle

Ich denke, Ihre Antwort kann mir Speck ersparen. Ich hatte ein Problem mit links schwebenden Bildern, die sich in einem ansprechenden Design stapeln. Bei einer Standardbildbreite von 30% und Bildern auf beiden Seiten konnte ich manchmal eine Textspalte mit nur 4 Zeichen Breite haben.

— Sherwood Botsford