Как обернуть текст вокруг изображения с помощью HTML / CSS

106

Я хочу создать блок текста, как на следующем рисунке:

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

Вопрос, возможно ли это?

html css user1780343
источник
1
возможный дубликат обтекания текста вокруг изображения с отступом и выравниванием
mavrosxristoforos
Вы пытаетесь обернуть текст вокруг изображения, как в обычных <p>тегах, и так далее, но вы также упомянули <textarea>, что это может быть совершенно другой проблемой. Почему бы вам не опубликовать свой HTML-код, если он у вас есть? Спасибо.
Marc Audet
1
Да, вы просто переместите изображение php влево, и текст будет обтекать его :-)
Джек Так
Все эти комментарии и нет принятого ответа ...
Дэйв Кантер

Ответы:

111

у вас есть 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;
}

FIDDLE

http://jsfiddle.net/kYDgL/

BeNdErR
источник
51

С помощью CSS Shapes вы можете сделать еще один шаг вперед, чем просто разместить текст вокруг прямоугольного изображения.

Фактически вы можете обернуть текст так, чтобы он принял форму края изображения или многоугольника, вокруг которого вы его оборачиваете.

DEMO FIDDLE (сейчас работает над 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>
Развернуть фрагмент

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

Даниилд
источник
1
Есть ли какой-нибудь вариант, как обернуть объект «Вокруг», чтобы объект мог быть посередине?
redestructa 07
@redestructa проверьте исключения CSS. См. мой пост: stackoverflow.com/a/19895616/703717 В настоящее время он поддерживается только в IE - caniuse.com/#feat=css-exclusions
Данид
20

Дополнение к ответу BeNdErR :
элемент "other 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 06
float: меня ничто не спасло! Продолжал пытаться плавать: вправо второй элемент безрезультатно.
bkunzi01
11

Если размер изображения является переменным или дизайн адаптивный , помимо обтекания текста, вы можете установить минимальную ширину абзаца, чтобы он не стал слишком узким.
Создайте невидимый псевдоэлемент CSS с желаемой минимальной шириной абзаца. Если для этого псевдоэлемента недостаточно места, он будет сдвинут под изображение, забрав с собой абзац.

#container:before {
  content: ' ';
  display: table;
  width: 10em;    /* Min width required */
}
#floated{
    float: left;
    width: 150px;
    background: red;
}
Джитин Б
источник
Думаю, твой ответ может спасти меня от бекона. У меня была проблема с левыми плавающими изображениями, складывающимися в адаптивном дизайне. С моей шириной изображения по умолчанию, равной 30%, и изображениями с обеих сторон, я мог иногда иметь текстовый столбец шириной всего 4 символа.
Шервуд Ботсфорд