Как выровнять Div элемент в существующем контенте

поясню с небольшим примером здесь:Как выровнять Div элемент в существующем контенте

У меня есть HTML-страница с некоторым содержанием уже и без изменения, что текст, который я хочу, чтобы вставить некоторого сообщения (скажем, вставка изображения) в середине уже существующего содержимого, оставив div сверху.

Возьмите взгляд на эту картину, которая, прежде чем делать некоторые CSS работы:

http://i.stack.imgur.com/uhJbx.png

Описание: изображение вставляется в содержание в верхней части содержания с DIV находится на вершине

И теперь после применения CSS, я хочу, чтобы поместить некоторое где между содержанием, например:

http://i.stack.imgur.com/67YFf.png

Описание: изображение вставляется с помощью CSS выровнены в середине содержания, но DIV находится в верхней

HTML:

<div class="myimg"> 
    <img src=http://s14.postimg.org/miss2r3xt/html_css.jpg /> 
</div> 
<p>Some paragraph </p> 

<strong>What is HTML?</strong> 

<strong>What is CSS?</strong> 
<p>Some paragraph</p>

CSS:

.myimg { 
    position: absolute; 
}

Вот ссылка для простого примера, который я пытаюсь изменить на jsfiddle.

Сообщите мне, если вы, ребята, можете помочь !!!

источник

2013-07-31 Som

Я не думаю, что это может быть сделано только с помощью CSS (или без серьезного взлома блочную модель ...).Возможно, я ошибаюсь, но я думаю, что вам нужно переместить свой тег '' вместо –

. Итак, вы хотите переместить изображение внутри div, но не div? Зачем? – Liam

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

Попробуйте ниже CSS, чтобы позиционировать изображение с вне изменения содержания HTML:

.myimg { 
margin-top: 100px; 
} 
div.myimg + p { 
position: absolute; 
    top: 0px; 
    left: 0px; 


}

Посмотрите на рабочем демо здесь: Demo

источник

2013-07-31 10:21:32 web2008

Это работает только в том случае, если текст имеет высоту 100 пикселей, см .: http://jsfiddle.net/ZjCfp/10/. ОП говорит, что это изменится. – Liam

Для добавления некоторых элементов с помощью CSS, посмотрите на :after et :before.

Например, вы можете добавить эту строку в CSS

strong:before{ 
    content:url('http://s14.postimg.org/miss2r3xt/html_css.jpg'); 
}

источник

2013-07-31 10:26:46

Знайте, что IE слишком плохо поддерживает контент http://caniuse.com/css-gencontent – Liam

Если вы принимаете решение JQuery, это было бы поместить изображение после первого абзаца содержания:

$(document).ready(function(){ 
    var theImg = $('.myimg').remove(); 
    $('p').first().after(theImg); 
});

Если вы введите маркер в свой контент, затем используйте этот маркер вместо $('p').first().

Ваш fidlle, обновленный с этим подходом:

http://jsfiddle.net/ZjCfp/9/

источник

2013-07-31 10:28:05

Как выровнять Div элемент в существующем контенте

ответ

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