이미지 또는 배경 이미지를 효과적으로 플로팅하는 방법

Question

샘플 스크린 샷에서 아래에 표시된 것처럼 여는 따옴표와 닫는 따옴표를 나타내는 두 개의 그래픽 이미지 파일을 동적으로 표시해야합니다.

인용 부호는 그림과 같이 상위 콘텐츠 블록의 왼쪽과 오른쪽에 표시되어야합니다. 콘텐츠 블록 너비는 페이지에 따라 다릅니다.

플로트 및 배경 이미지를 사용해 보았습니다. 누구든지 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%; 
} 

그 코드가 인용 그래픽은 폭과 높이가 50 픽셀한다고 가정 - 필요에 따라 수정합니다.

마지막으로 콘텐츠가 견적 이미지와 겹치지 않도록 컨테이너 (예 : div)에 적절한 padding-left 및 padding-right을 설정하여 콘텐츠가 충분히 멀리 떨어져 있도록합니다.

Answer 2

컨테이너 내부에 absolute 위치를 사용할 수도 있습니다. 예를 들어 : 전 : 후이 하다니

.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>