Обтекание текста вокруг float right

Привет, я создавал страницу, и я не могу заставить что-то работать. У меня есть изображение в конце абзаца, а в css это плавающее право. Я не могу заставить изображение двигаться вверх, чтобы быть частью абзаца, а затем сделать вокруг него текст. JSFIDDLE Обтекание текста вокруг float right

HTML

<p> 
    TEXT GOES HERE 
    <img src="src/src.jpg"> 
</p>

CSS

img{ 
    float:right; 
}

Убедитесь, чтобы проверить JSfiddle, поскольку она имеет лучшее представление о том, что я хочу.

источник

2015-04-17 Jace Bayless

Чтобы быть ясным, вы хотите, чтобы изображение находилось в нижнем правом углу страницы с обтеканием текстом вокруг него вместо изображения, появляющегося под последней строкой текста. –

@Marc Правильно, внизу справа внизу снизу с текстом внизу. Я мог бы сделать картинку для отображения, если путаница продолжается –

Это будет непростая задача, JS должен быть задействован - https://github.com/gilly3/lowFloat – Stickers

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

<p> 
    <img src="src/src.jpg"> 

    TEXT GOES HERE 
</p>

источник

2015-04-17 13:24:05 Aaron

Но текст очень длинный, и я хочу, чтобы он был внизу. Будет ли это работать. Вы можете увидеть живой пример того, что я имею в виду в http: // repmofbla.ком/SimmonsRedone/biographyHTML.html. –

HTML работает в основном порядке стекирования сверху вниз, поэтому с изображением под текстом и добавлением 'float: right;' для него он будет плавать вправо, но нет ничего ниже изображения для перемещения вверх в это пустое пространство. – Aaron

Вы могли бы, однако, поместить изображение в несколько абзацев до конца текста. – Aaron

Вы должны либо переместить изображение вперед или переместить его снаружи:

<p> 
    <img src="src/src.jpg"> 
    TEXT GOES HERE 
</p>

или

<img src="src/src.jpg"> 
<p> 

    TEXT GOES HERE 
</p>

источник

2015-04-17 13:25:58 mohamedrias

-1

Поместите <div> внутри вашего пункта и сохранить текст внутри него. Затем сделайте, как float: left и ваше изображение float: right

Что-то, как показано ниже:

HTML код образец JSFiddle

<p> 
    <div> THIS IS A LOT OF TEXT 
      ........................ 
      ......................... 
    </div> 
    <!-- MOVE THIS IMAGE UP SO IT'S NOT BELOW AND WRAP TEXT AROUND IT --> 
    <img src="..Troll-face.png" /> 
</p>

CSS

img{ 
    float:right; 
    width:150px; 
} 

p { 
    width:100%; 
    height: auto; 
} 

div{ 
    width:70%; 
    height:auto; 
    float: left; 
}

источник

2015-04-17 13:48:07

div внутри абзаца не является семантическим, очень плохим ответом :( – Aaron

Семантика в стороне, изображение все еще не там, где OP хочет его, и текст не обертывает его ... –

Аарон прав, изображение должно пройти над текстом. Если это долго вы всегда можете сделать

<p> 
    TEXT GOES HERE<br> 
    <img src="src/src.jpg"> 
    TEXT GOES HERE 
</p>

Не уверен, если это кошерно с кодированием, но это работает.

источник

2015-04-17 20:55:02

Обтекание текста вокруг float right

ответ

Смежные вопросы