Обтекание текста вокруг элемента с абсолютным расположением

Я застрял на чем-то, где у меня есть множество страниц контента с полем сообщений. В этом окне сообщения вы можете иметь изображения, текст, заголовки и т. Д. Однако каждое окно сообщения будет иметь значок в правом верхнем углу окна. Изображение будет сидеть в верхней части окна, если я использую положение: абсолютное. Однако если поле сообщения имеет заголовок или абзац и заполняется шириной поля. Текст будет сидеть под изображением.Обтекание текста вокруг элемента с абсолютным расположением

Мне в основном нужна обертка вокруг изображения с шириной, поэтому текст будет сидеть только до края изображения. Я на 99% уверен, что у меня это работает в firebug, обертывая абсолютное позиционное изображение в div и давая ему некоторые стили. Но я не могу заставить его работать сегодня!

Существует сотни страниц, поэтому перемещение HTML вокруг не является вариантом. На изображении в настоящее время нет обертки. Поэтому мне нужно использовать JQuery для обертки изображения. (Вот если это ответ).

Я знаю, что абсолютная позиция занимает элемент за пределами потока документа, но есть ли что-то, что я могу сделать?

Во всяком случае вот мой код до сих пор:

<div class="message"> 
<h3>Some text, a header perhaps? But this is the next that will sit under the image, sometimes it's a p tag.</h3> 
<img class="messageIcon" src="/link-to-icon/which-are-the-same-size" border="0" width="64" > 
<p>Some more random text that would appear in the messagebox this could go on for a few lines.</p> 
</div> 


<script type="text/javascript"> 

$(document).ready(function(){ 
    $('img.messageIcon').wrap('<div class="messageIconWrap" />'); 

    alert("this is a test"); 

}); 



</script>

JS обертывания DIV вокруг изображения

CSS:

.messageIconWrap{ 
    display: inline-block; 
    float:right; 
    height:60px; 
    width:60px; 
} 

div.message { 
    position: relative; 
} 
.message { 
    background: none repeat scroll 0 0 #393939; 
    clear: both; 
} 

.messageIcon { 
    position: absolute; 
    right: 20px; 
    top: 20px; 
    float: right; 
}

JS Fiddle - http://jsfiddle.net/jdp7E/

источник

2013-06-20 JDavies

Где бы мы ни находились? или вы можете настроить его на jsfiddle.net? –

Не можете ли вы только изображение в HTML-код для своего окна сообщений, а затем просто 'float'it направо? – CBroe

Нет, как я уже сказал, там сотни страниц, где они уже добавлены. Обновленный билет с JSfiddle – JDavies

Чистый раствор CSS: Добавить псевдо-элемент в начало контейнера с

div.message:before { content:" "; float:right; width:75px; height:75px; }

http://jsfiddle.net/jdp7E/1/

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

источник

2013-06-20 11:03:16 CBroe

Спасибо, похоже, это может сработать. Мне нужно будет проверить, что клиент в IE работает нормально. Не могли бы вы более подробно объяснить, как это работает? – JDavies

Очень умный;) Мне нравится его простота, работает отлично! – Arkana

Ну, он просто генерирует псевдоэлементный элемент в начале контейнера, и поскольку он становится плавающим вправо, текстовое содержимое следующих элементов обтекает его. В основном, что я предложил вам раньше, просто сначала поместив изображение в себя и плавая, но поскольку вы сказали, что это не практично в вашем случае, это временное решение, которое достигает такого же эффекта, не манипулируя или не добавляя какую-либо разметку, и оставляет пространство под абсолютно позиционированным изображением «зарезервировано». – CBroe

Ну, возможно, это очень быстрое решение, но как насчет набора padding-right на «.message» как это?

div.message { 
    position: relative; 
    padding-right:80px; /* - You can set a padding higher or equal than the image - */ 
}

Working fiddle

источник

2013-06-20 10:59:19 Arkana

Я не могу, так как текст нужно обертывать и иметь одинаковый интервал в левой части страницы как справа. – JDavies

Это хорошее и быстрое решение, как бы я предпочитаю снимать положение абсолютно из значка в этих случаях. –

@JoshDavies. Мой плохой :(извините меня. В этом случае сложнее, позвольте мне попробовать, потому что я уверен, что у меня есть ваша же потребность около нескольких месяцев назад ... – Arkana

jsFiddle Demo

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

var mw = $('.message:first-child').width(); 
var iw = $('.messageIcon').width() + 20;//20 is for padding 
var percent = parseInt((mw - iw)/mw * 100); 
$('.message :first-child').width(percent+"%");

источник

2013-06-20 10:59:22

Обтекание текста вокруг элемента с абсолютным расположением

ответ

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