Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/11: Рейтинг темы: голосов - 11, средняя оценка - 5.00
 Аватар для art-ajn
0 / 0 / 0
Регистрация: 04.10.2012
Сообщений: 31

Как в позиционировании сделать так чтобы текст обтекал фотографию

30.01.2013, 18:56. Показов 2244. Ответов 7
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день))) Я только начал изучать HTML и столкнулся с такой проблемой: как в позиционировании сделать так что-бы текст обтекал фотографию?
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
30.01.2013, 18:56
Ответы с готовыми решениями:

Как сделать чтобы текст обтекал блок?
Ребята застрял. Надо кнопку расположить внизу блока и чтобы текст его обтекал. Можно ли так сделать? Подскажите как... Html: ...

Как сделать, чтобы вертикально бегущую строку обтекал текст
Подскажите как сделать так что-бы вертикально бегущею строку обтекал текст ?

Как сделать, чтобы текст "обтекал" изображение?
Я начинающий программист, помогите, пожалуйста, решить проблему. Создаю страницу, использую таблицу для выравнивания текста и изображения....

7
 Аватар для Sir1us
20 / 20 / 1
Регистрация: 30.01.2013
Сообщений: 99
31.01.2013, 01:34
Цитата Сообщение от art-ajn Посмотреть сообщение
Добрый день))) Я только начал изучать HTML и столкнулся с такой проблемой: как в позиционировании сделать так что-бы текст обтекал фотографию?
HTML5
1
2
3
<img src="https://www.cyberforum.ru/images/img.png" align="left" width="500" height="500 />
текст.................<br>
текст.................<br>
left - лево
right- право

можно еще через CSS, но тебе еще ранова-то будет)
0
14 / 14 / 3
Регистрация: 14.02.2010
Сообщений: 293
31.01.2013, 03:28
Цитата Сообщение от pro100Omega Посмотреть сообщение
а что если position:absolute:
???? как тогда?
ведь на абсолют не работаєт margin...
мне тоже єто интересна...
как тогда?
0
 Аватар для art-ajn
0 / 0 / 0
Регистрация: 04.10.2012
Сообщений: 31
31.01.2013, 11:58  [ТС]
Цитата Сообщение от Sir1us Посмотреть сообщение
Code
1
2
3
<img src="https://www.cyberforum.ru/images/img.png" align="left" width="500" height="500 />
текст.................<br>
текст.................<br>
left - лево
right- право

можно еще через CSS, но тебе еще ранова-то будет)
Этот метод я знаю я имел ввиду когда используется :

CSS
1
2
3
{position:absolute; 
top:100px;
right:100px;}
или

CSS
1
2
3
4
{position:relative;
  left: -135px;
 right: -120px;
}
У меня выходит так что текст накладывается на изображение либо наоборот ((
0
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
31.01.2013, 21:02
CSS
1
position:absolute; и  position:fixed;
вырывают элемент из общего потока

css2
Кликните здесь для просмотра всего текста
9.3.1 Выбор схемы позиционирования: свойство 'position'
Свойства 'position' и 'float' определяют, какой из алгоритмов позиционирования CSS2 используется для расчёта позиции бокса.

'position'
Значение: static | relative | absolute | fixed | inherit
Начальное: static
Применяется: ко всем элементам, но не к генерируемому содержимому
Наследуется: нет
Процентное: N/A
Носитель: визуальный

Значения имеют следующий смысл:

static
Бокс является нормальным боксом, расположенным в соответствии с нормальным расположением. Свойства 'left' и 'top' не применяются.
relative
Позиция бокса высчитывается в соответствии с нормальным расположением. Затем бокс смещается относительно нормального расположения. Если бокс В позиционирован относительно, расположение последующего бокса вычисляется так, как если бы бокс В не имел смещения.
absolute
Позиция бокса (и возможные размеры) определяется свойствами 'left', 'right', 'top' и 'bottom'. Эти свойства устанавливают смещение относительно бокса содержащего блока. Абсолютно позиционированные боксы изымаются из нормального обтекания. Это значит, что они не влияют на вывод последующих родственных элементов. Также, хотя абсолютно позиционированные боксы имеют поля, они не соединяются с другими полями.
fixed
Позиция бокса вычисляется в соответствии с моделью 'absolute', но, в дополнение к этому, бокс фиксируется в соответствии с некоторой ссылкой. В случае с непрерывными носителями, бокс фиксируется относительно порта просмотра (и не перемещается при прокрутке). В случае со страничными носителям, бокс фиксируется относительно страницы, даже если страница просматривается через порт просмотра (в случае просмотра перед печатью, например). Авторам может понадобиться специфицировать 'fixed' способом, не зависящим от носителя. Например, автор может захотеть, чтобы бокс оставался в верхней части порта просмотра экрана, но не вверху каждой печатаемой страницы. Две такие спецификации можно разделить, используя правило @media, как здесь:
Пример(ы):

@media screen {
H1#first { position: fixed }
}
@media print {
H1#first { position: static }
}
0
 Аватар для art-ajn
0 / 0 / 0
Регистрация: 04.10.2012
Сообщений: 31
01.02.2013, 00:04  [ТС]
Цитата Сообщение от newJS Посмотреть сообщение
CSS
1
position:absolute; и  position:fixed;
вырывают элемент из общего потока

css2
Кликните здесь для просмотра всего текста

Пасиб почитаю разберусь ))
0
5 / 5 / 2
Регистрация: 29.01.2013
Сообщений: 19
01.02.2013, 00:21
Цитата Сообщение от art-ajn Посмотреть сообщение
Добрый день))) Я только начал изучать HTML и столкнулся с такой проблемой: как в позиционировании сделать так что-бы текст обтекал фотографию?
почитайте о свойстве float(CSS)
0
 Аватар для art-ajn
0 / 0 / 0
Регистрация: 04.10.2012
Сообщений: 31
01.02.2013, 12:02  [ТС]
Цитата Сообщение от kupas Посмотреть сообщение
почитайте о свойстве float(CSS)
пасиб ))
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
01.02.2013, 12:02
Помогаю со студенческими работами здесь

Как сделать что бы текст обтекал фотку?
Так сейчас: &lt;div id=&quot;right&quot;&gt; &lt;h2 class=&quot;red&quot;&gt;Welcome To My Website&lt;/h2&gt; &lt;p&gt;&lt;img...

Как сделать чтобы основной див обтекал внутренние
Как сделать чтобы основной див обтекал внутренние. Вот код - http://jsfiddle.net/e5fFH/ &lt;div class=&quot;wrap&quot;&gt; ...

Чтобы текст не обтекал checkbox?
господа подскажите как сделать, что бы текст не обтекал чекбокс? А отображался рядом справа но блоком input + label { display:...

Как сделать так чтобы при наведении на неполный текст, высвечивался полный?
ВСЕМ ПРИВЕТ!!! Помогите пожалуйста! Что нужно сделать чтобы при наведении мышки на синюю зону (смотри на картинке), на красной зоне чтобы...

Можно как-то сделать так, чтобы браузер, когда видит текст заключённый делал его курсивом?
Можно как-то сделать так, чтобы браузер, когда видит текст заключённый в кавычки делал его курсивом?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование
8Observer8 05.03.2026
Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru