div 안에는 마지막에 이미지, 다음 단락, 이미지가 있습니다. 두 번째 이미지를 'inside'문단으로 사용할 수 없습니다.

Question

그래서 div가 있고 그 안에 3 가지가 있습니다. 1. 이미지 (큰 따옴표) 2. 라이브 텍스트 단락 3. 끝에 다른 이미지 (큰 오른쪽 인용 부호).

div에 넣을 때 첫 번째 이미지는 텍스트를 줄 바꿈시킵니다. 그것은 단락의 일부인 것처럼 보입니다.

내 문제 : 끝 부분의 '안쪽'에 두 번째 이미지를 가져올 수 없습니다. 단락 영역 아래로 밀려납니다. 내 단락 텍스트로 '포장'하고 싶습니다.

#textarea { 
width: 185px; 
height: 70px; 
padding: 49px; 

}

#textarea p { 
font-size: 15px; 
font-weight: bold; 
color: #4D6F79; 
line-height: 230%; 
text-align: center; 
-webkit-margin-after: 0em; 
-webkit-margin-before: 0em; 

}

<div id= "textarea"> 
      <img src="images/leftquote.png" width="36" height="43" alt="left quotation" align="left"/> 
      <p>The kids really loved it!</p> 
      <img src="images/rightquote.png" width="32" height="20" alt="right quotation" align="right"/> 
     </div> 

어떤 도움/아이디어가 많이 주시면 감사하겠습니다! 감사!!

Answer 1

단락에서 두 번째 이미지를 원한다는 것이 정확히 무엇인지 모르겠지만 CSS를 사용하여 두 번째 이미지를 원하는 위치로 재배치하기위한 쉽고 간편한 방법을 알고 있습니다 ... 먼저 이미지에 ID :

<img id='image2' src="images/rightquote.png" width="32" height="20" alt="right quotation" align="right"/> 

그런 다음 CSS를 사용하여 위치를 변경합니다 :

<style> 
#image2 { 
position:relative; 
top:-50px; // These numbers are just examples you can change them to anything to properly reposition your text. 
left:20px; 
z-index:-1; //depending on whether you want your image infront or behind the text you can change your z-index to either a positive number e.g.(5) or negative number e.g.(-2). 
} 
</style> 

서로 다른 브라우저에서 다른 formattings에 대해 고민하는 경우에 그들은 하듯이 펼쳤던 떨어져 있지만 상당히 다른 것으로 아파 거기 또 다른 방법이다. 오버플로를 사용하여 이미지 주위에 텍스트를 배치하는 것이 좋습니다. 예는 :

<div class='floating-eg'> 
<p>The kids really loved it!</p> 
     <img class='left' src="images/rightquote.png" width="32" height="20" alt="right quotation" align="right"/> 
</div> 
<style> 
.floating-eg { 
    overflow: auto; 
} 
p { 
    overflow: auto; 
} 
</style> 

당신은 here 포장의 관련 예제를 볼 수 있습니다.