Jak zawijać tekst wokół obrazu za pomocą HTML / CSS

106

Chcę zaprojektować blok tekstu, taki jak na poniższym obrazku:

wprowadź opis obrazu tutaj

Pytanie, czy jest to możliwe?

html css

— user1780343
źródło

1

możliwy duplikat zawijania tekstu wokół obrazu z wcięciem i uzasadnieniem

— mavrosxristoforos

Czy próbujesz zawijać tekst wokół obrazu, jak w zwykłych <p>tagach itd., Ale wspomniałeś również <textarea>, że może to być zupełnie inny problem. Dlaczego nie opublikujesz swojego kodu HTML, jeśli go masz? Dziękuję Ci.

— Marc Audet

1

Tak, wystarczy przesunąć obraz php w lewo, a tekst zawinie się wokół niego :-)

— Jack Tuck,

Wszystkie te komentarze i brak akceptowanej odpowiedzi ...

— Dave Kanter

111

masz do floatswojego kontenera obrazu w następujący sposób:

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

SKRZYPCE

http://jsfiddle.net/kYDgL/

— BeNdErR
źródło

51

Dzięki CSS Shapes możesz pójść o krok dalej niż tylko przesuwać tekst wokół prostokątnego obrazu.

W rzeczywistości możesz zawijać tekst tak, aby przybierał kształt krawędzi obrazu lub wielokąta, wokół którego go zawijasz.

DEMO FIDDLE (obecnie pracuję nad webkitem - 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>

Rozwiń fragment

Tutaj jest również dobra lista artykułów na temat kształtów CSS

— Danield
źródło

1

Czy jest jakaś opcja, jak owinąć obiekt „WOKÓŁ” tak, aby znajdował się pośrodku?

— redestructa

@redestructa sprawdzeniu CSS exclusions.See mój post: stackoverflow.com/a/19895616/703717 Jest obecnie obsługiwany tylko w IE - caniuse.com/#feat=css-exclusions

— Danield

20

Dodatek do odpowiedzi BeNdErR :
Element „other TEXT” powinien mieć na float:noneprzykład:

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

Rozwiń fragment

— T.Todua
źródło

to jedyny sposób, żeby to zadziałało. I najczystsze rozwiązanie.

— andygoestohollywood,

float: nic mnie nie uratowało! Utrzymane próby unoszenia się: popraw drugi element bez skutku.

— bkunzi01

11

Jeśli rozmiar obrazu jest zmienny lub projekt jest responsywny , oprócz zawijania tekstu, możesz ustawić minimalną szerokość akapitu, aby nie stał się zbyt wąski.
Podaj niewidoczny pseudoelement CSS o żądanej minimalnej szerokości akapitu. Jeśli nie ma wystarczającej ilości miejsca, aby zmieścić ten pseudoelement, zostanie on wepchnięty pod obraz, zabierając ze sobą akapit.

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

— Jithin B.
źródło

Myślę, że twoja odpowiedź może zaoszczędzić mi trochę bekonu. Miałem problem z układaniem się lewych pływających obrazów w responsywnym projekcie. Przy mojej domyślnej szerokości obrazu wynoszącej 30% i obrazach po obu stronach mogłem czasami mieć kolumnę tekstową o szerokości tylko 4 znaków.

— Sherwood Botsford