1

Тема: Обтікання текстом в середині фігури

Доброго вечора, шановні! Проблема в тому, як додати текст в середину фігури, щоб він обтікав фігуру? Фігура має залишитися динамічною.

CSS:

body {
background-image: url(images/1.jpg);
background-size:cover; /*Масштабирует изображение с сохранением пропорций так, 
                       чтобы его ширина или высота равнялась ширине или высоте блока*/
}
#block1 {
  width: 70%;
  height:50%;
} 
.tlq, .blq {width:32px;height:32px;float:left;}
.tbl, .bbl {margin: 0 32px;height:32px; background-color: blue;}
.trq, .brq {width:32px;height:32px;float:right;}
.ml {width:100%;  background-color: blue;}
.tlq {background: transparent url('./images/q11.png')  0px 0px no-repeat;}
.trq {background: transparent url('./images/q11.png')  -32px 0px no-repeat; }
.brq {background: transparent url('./images/q11.png')  -32px -32px no-repeat; }
.blq {background: transparent url('./images/q11.png')   0px -32px no-repeat; }

HTML:

<div id="block1">
      <div class="tl">
        <div class="trq">
            </div>
        <div class="tlq">
            </div>
        <div class="tbl">
            </div>
      </div> 
      <div class="ml">
          some text some text some text some text some text some text some text some text 
          some text some text some text some text some text some text some text some text 
          some text some text some text some text some text some text some text some text 
      </div> 
      <div class="bl">
        <div class="brq">
            </div>
        <div class="blq">
            </div>
        <div class="bbl">
            </div>
      </div> 
  </div>
Post's attachments

1.jpg 187.65 kb, 273 downloads since 2016-10-07 

2 Востаннє редагувалося vanekulykov (07.10.2016 17:02:32)

Re: Обтікання текстом в середині фігури

Вот другой файл

Post's attachments

q11.png 3 kb, 244 downloads since 2016-10-07 

3

Re: Обтікання текстом в середині фігури

http://htmlbook.ru/faq/kak-sdelat-obtek … ki-tekstom

або я вас не зрозумів
викладайте код на якийсь http //jsfiddle.net/  http://codepen.io/

4 Востаннє редагувалося vanekulykov (07.10.2016 18:26:07)

Re: Обтікання текстом в середині фігури

Key написав:

http://htmlbook.ru/faq/kak-sdelat-obtek … ki-tekstom

або я вас не зрозумів
викладайте код на якийсь http //jsfiddle.net/  http://codepen.io/

Post's attachments

Снимок.jpg 452.72 kb, 258 downloads since 2016-10-07 

5

Re: Обтікання текстом в середині фігури

Я не експерт, але все ж таки:
- спробуйте текст задати як position:absolute;
- а на рахунок таких відступів, як на малюнку використовуйте borderhttps://habrahabr.ru/post/141658/

Подякували: vanekulykov1

6

Re: Обтікання текстом в середині фігури

poperechnyi1 написав:

Я не експерт, але все ж таки:
- спробуйте текст задати як position:absolute;
- а на рахунок таких відступів, як на малюнку використовуйте borderhttps://habrahabr.ru/post/141658/

Не працює

7

Re: Обтікання текстом в середині фігури

https://jsfiddle.net/bqjqjdxb/

Подякували: 221VOLT, vanekulykov2

8 Востаннє редагувалося vanekulykov (07.10.2016 21:26:58)

Re: Обтікання текстом в середині фігури

обттікання має бути впритик до границь
Ще я згадав те, що фігура та всі її властивості мають підтримуватися в ІЕ 7-8. Обтікання має бути ідентичним до того, яке на раніше прикріпленому зображенні.

9

Re: Обтікання текстом в середині фігури

картинкою тоді верстайте.

10 Востаннє редагувалося vanekulykov (08.10.2016 12:53:58)

Re: Обтікання текстом в середині фігури

Key написав:

картинкою тоді верстайте.

Кути фігури для підтримки в IE зроблені якраз зображеннями.

11

Re: Обтікання текстом в середині фігури

три різні дівки зробіть...
першому і останьому дайте падінги щоб текст не ліз на абсолют.

12 Востаннє редагувалося mrtoxas (14.10.2016 15:44:32)

Re: Обтікання текстом в середині фігури

Я вам і тут можу сказати, що такого ви не зробите. :) Або обтікання, або динаміка
А ваше завдання суперечить законам верстки. Якщо текст може обтікати два ваших верхніх вугла, то при цьому, два нижніх - він обтікати не зможе, як би ви цього не хотіли.

Подякували: vanekulykov1