Как эффективно плавать изображение или фоновое изображение

Question

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

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

Я пробовал поплавок и фоновое изображение. У кого-нибудь есть подсказка или трюк, чтобы правильно, динамично и гибко позиционировать 2 файла изображения?

Вот то, что я до сих пор после работы с @Utkanos ответить:

HTML

<div class="postsPage_item_content postsPage_item_quote"><?php the_content();?></div> 

CSS

div#maincontentcontainer div#primary div div.postsPage_item_content { 
    position: relative; 
    text-align: center; 
} 
div#maincontentcontainer div#primary div div.postsPage_item_quote::before, div#maincontentcontainer div#primary div div.postsPage_item_quote::after { 
    background-image: url('../images/QUOTE1.png'); 
    content: ''; 
    display: block; 
    left: 20%; 
    height: 28px; /* background-image natural height is 28px */ 
    position: absolute; 
    top: calc(50% - 50px); 
    width: 36px; /* background-image natural width is 36px */ 
} 
div#maincontentcontainer div#primary div div.postsPage_item_quote::after { 
    background-image: url('../images/QUOTE2.png'); 
    left: auto; 
    right: 20%; 
} 

Дисплей

Желаемые результаты состоят в том, что (1) каждая из динамически отображаемых котировок выравнивается с верхней частью блока контента и (2) динамически позиционирует кавычки с заполнением поля слева и справа от блока содержимого, как показано красными стрелками ,

Answer 1

Псевдо элементы идеально подходят для такого рода вещей.

HTML:

<div id='my_div'> 
    <p>Content here.</p> 
    <p>Etc.</p> 
</div> 

CSS:

#my_div { 
    position: relative; 
} 
#my_div::before, #my_div::after { 
    content: ''; 
    width: 50px; 
    height: 50px; 
    position: absolute; 
    display: block; 
    background: url('path/to/open_quote_img.png'); 
    left: 5%; 
    top: calc(50% - 25px); 
} 
#my_div::after { 
    background: url('path/to/close_quote_img.png'); 
    left: auto; 
    right: 5%; 
} 

Этот код предполагает, что ваша цитата графика 50px по ширине и высоте - изменять по мере необходимости.

Наконец, чтобы обеспечить ваше содержание не наложения кавычек изображения, установите соответствующий padding-left и padding-right на контейнере (в моем примере div), поэтому содержание достаточно нажат от них.

Answer 2

Другая возможность: absolute позиционирование внутри контейнера relative. Например:

.container { width:300px; position:relative;padding:20px} 
 
    .left-quote {position:absolute; top:10px; left:10px; font-size:30px;} 
 
    .right-quote {position:absolute; bottom:20px; right:10px; font-size:30px;}

<div class="container"> 
 
     <span class="left-quote">"</span> 
 
     <span class="right-quote">"</span> 
 
     <p>is one of the smartest and most dedicated people that I know... he helped the company achieve incredible share of voice in key publications such as...</p> 
 
    </div>