Як обернути текст навколо зображення за допомогою HTML / CSS

106

Я хочу створити блок тексту на зразок наступного малюнка:

введіть тут опис зображення

Питання, чи можливо це?

html css

— користувач1780343
джерело

1

можливий дублікат Обгортання тексту навколо зображення з відступом та виправданням

— mavrosxristoforos

Ви намагаєтесь обернути текст навколо зображення, як у звичайних <p>тегах тощо, але ви також згадали <textarea>, що може бути зовсім іншою проблемою. Чому ви не опублікуєте свій HTML, якщо у вас є такий? Дякую.

— Marc Audet

1

Так, ви просто перенесіть зображення PHP вліво, і текст обернеться навколо нього :-)

— Jack Tuck

Усі ці коментарі та жодна прийнята відповідь ...

— Дейв Кантер

110

Ви повинні мати floatсвій контейнер із зображеннями таким чином:

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

ПІДТВОРЕННЯ

http://jsfiddle.net/kYDgL/

— BeNdErR
джерело

51

За допомогою CSS Shapes ви можете піти на крок далі, ніж просто плавати текст навколо прямокутного зображення.

Ви можете фактично обернути текст таким чином, щоб він набув форми краю зображення або багатокутника, який ви обмотуєте.

DEMO FIDDLE (Зараз працює над веб-канітом - каніузою )

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

Розгорніть фрагмент

Крім того, ось хороший список окрім статті про CSS Shapes

— Даніелд
джерело

1

Чи є якийсь варіант, як обернути об’єкт "ВОНА", щоб об'єкт міг опинитися посередині?

— redestructa

@redestructa перевірити CSS exclusions.See мій пост: stackoverflow.com/a/19895616/703717 Це в даний час підтримується тільки в IE - caniuse.com/#feat=css-exclusions

— Danield

20

Доповнення до відповіді BeNdErR :
Елемент "інший TEXT" повинен мати float: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>

Розгорніть фрагмент

— Т.Тодуа
джерело

це єдиний спосіб, як я міг змусити це працювати .. І найчистішим рішенням.

— andygoestohollywood

float: ніхто не врятував мене! Спробували проплисти: правий другий елемент безрезультатно.

— bkunzi01

11

Якщо розмір зображення мінливий або дизайн чуйний , крім упаковки тексту, ви можете встановити мінімальну ширину для абзацу, щоб уникнути його занадто вузького розміру .
Надайте невидимий псевдоелемент CSS з потрібною мінімальною шириною абзацу. Якщо не вистачає місця, щоб помістити цей псевдоелемент, він буде висунутий під зображення, взявши з собою абзац.

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

— Джитін Б
джерело

Я думаю, що ваша відповідь може врятувати мені трохи бекону. У мене виникли проблеми з тим, що ліві плаваючі зображення складаються у чуйному дизайні. З моєю шириною зображення за замовчуванням 30% та зображеннями з обох сторін, іноді я міг би мати текстовий стовпчик шириною лише 4 символи.

— Шервуд Ботсфорд