Обтекание только первого параграфа

@maboz · Регистрация: 26.05.2014

Студворк — интернет-сервис помощи студентам

Как заставить обтекать картинку как на 2 рис., т. е. чтобы так обтекали все параграфы...

Если сделать так:

CSS
1
2
div img {float: left;}
p {overflow:hidden;}

То получается, как на рис. 1.

А нужно как на рис. 2.

К тому же мне нельзя делать padding-left равный ширине img.

CSS
1
p {padding-left: 100px;} /* так нельзя, так как, картинки в новостях то есть, то нету, а отступ будет постоянно... */

???

@Vladislav WebDev · 28.05.2014, 08:07

maboz, параграфу <p>...</p> задайте ширину и float: left, например http://jsbin.com/rabukoki/1/

HTML5
1
2
<div class="img"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque vitae voluptatum inventore sequi error atque assumenda. Possimus molestiae neque impedit dolor repellat excepturi ea aperiam aspernatur necessitatibus dolores ullam quibusdam?</p>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
* {
  padding: 0;
  margin: 0;
}
 
.img {
  width: 50px;
  height: 50px;
  background: #ccc;
  float: left;
}
 
p {
  width: 300px;
  float: left;
  background: green;
}

Добавлено через 1 час 58 минут
Ааа, у вас там несколько параграфов. Тогда оберните их в один див и уже этому диву задайте ширину и флоат лефт.

@maboz · 28.05.2014, 13:50 **[ТС]**

Не могу я отдельно несколько(все) параграфов обернуть без img. Это шаблон CMS. Либо все, либо ничего.

@Vladislav WebDev · 28.05.2014, 18:04

Сообщение от maboz

Либо все, либо ничего.

Ааа, вон что. Что-то кроме как с помощью js на ум ничего не приходит. http://jsbin.com/sefukiko/1

HTML5
1
2
3
4
5
6
7
<div class="img"></div>
<p>ПЕРВЫЙ ПАРАГРАФ
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque vitae voluptatum inventore sequi error atque assumenda. Possimus molestiae neque impedit dolor repellat excepturi ea aperiam aspernatur necessitatibus dolores ullam quibusdam?</p>
  <p>ВТОРОЙ ПАРАГРАФ
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque vitae voluptatum inventore sequi error atque assumenda. Possimus molestiae neque impedit dolor repellat excepturi ea aperiam aspernatur necessitatibus dolores ullam quibusdam?</p>
 <p>ТРЕТИЙ ПАРАГРАФ
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque vitae voluptatum inventore sequi error atque assumenda. Possimus molestiae neque impedit dolor repellat excepturi ea aperiam aspernatur necessitatibus dolores ullam quibusdam?</p>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
* {
  padding: 0;
  margin: 0;
}
 
.img {
  width: 50px;
  height: 50px;
  background: #ccc;
  float: left;
}
 
p {
  width: 300px;
  float: left;
  background: green;
  border-bottom: 1px solid #fff;
}

JavaScript
1
2
3
4
5
6
7
8
$(function() {
  $('p:not(:first)').each(function() {
    $(this).css({
      clear: 'both',
      marginLeft: $('p').offset().left
    });
  });
})

@monochromer · 29.05.2014, 11:52

Попробуйте очистить обтекание в блоке, где находится картинка и параграф. Например,

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="post">
    <div class="post__image">
      <img src="http://placeimg.com/160/120/arch" alt="img">
    </div>
    <div class="post__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Dignissimos non quos quia numquam laudantium officiis corrupti laboriosam quaerat temporibus accusantium magnam ducimus quis amet consectetur eveniet expedita fugiat dolore sunt. 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Dignissimos non quos quia numquam laudantium officiis corrupti laboriosam quaerat temporibus accusantium magnam ducimus quis amet consectetur eveniet expedita fugiat dolore sunt.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Dignissimos non quos quia numquam laudantium officiis corrupti laboriosam quaerat
 temporibus accusantium magnam ducimus quis amet consectetur eveniet expedita fugiat dolore sunt.</p>
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.post {
  overflow: hidden;
}
 
.post__image {
  float: left;
}
 
.post__image img {
  max-width: 100%;
}
 
.post__content {
  overflow: hidden;
}

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@maboz 0 / 0 / 0 Регистрация: 26.05.2014 Сообщений: 6
	28.05.2014, 13:50 [ТС]
	Не могу я отдельно несколько(все) параграфов обернуть без img. Это шаблон CMS. Либо все, либо ничего. 0