CSS 드롭 캡 이미지, 공백에 정렬된 텍스트
<p>저는 이것이 일상적인 드롭캡 상황이 아니라고 생각합니다. </p>
<p>대문자 "S"는 다음과 같은 이미지입니다. </p>
<p>실제 이미지는 상단까지 확장되어 있으니 참고해주세요. 상단 표시줄은 큰 S와 S 왼쪽의 그림을 포함하는 동일한 이미지의 일부입니다. 여기서는 잘 보이도록 배경을 파란색으로 색칠했는데, 자연색은 흰색입니다. <em> (그러나 맨 위에 있는 추가 회색 영역은 화면 캡처를 할 때 불편하므로 무시하십시오.) </em>상단 표시줄과 이미지를 깨뜨리고 싶지 않습니다. 나에게 제공된 이미지는 다음과 같습니다. 오른쪽 상단 모서리에 위쪽 막대가 그려져 있고 위쪽 막대 아래에 흰색 공간이 있는 직사각형 영역입니다. </strong></p>
<p>텍스트를 다음과 같이 표시하고 싶습니다(paint.net을 사용하여 생성됨). </p>
<p>텍스트의 첫 번째 줄은 대문자 "S"의 아래쪽에 정렬되며 처음 세 줄은 이미지의 흰색 영역 상단에 있고 4~6줄은 여백에 맞춰 왼쪽으로 정렬됩니다. . </p>
<p>또한 <strong>텍스트는 이미지의 흰색 부분을 덮어야 합니다</strong>. </p>
<p>또한 전체 텍스트 너비는 보장할 수 없으며 이는 EPUB이며 여러 장치에서 볼 수 있습니다. 따라서 <code>position:absolute</code>는 반드시 피해야 합니다. </p>
<p>관련 CSS를 거의 완전히 제거한 지금까지 시도한 HTML은 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;"><p class="dropcap-para">
<img 너비=135 높이=108 style="float:left" src="image002.jpg" alt="dropcap S"></img>
<span class="funky-text">HE ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut Labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco.
Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in rerehenderit.
Voluptate velit Essence cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat.
Proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.</span></pre>
<p>감사합니다. </p>
