> 웹 프론트엔드 > HTML 튜토리얼 > HTML의 텍스트 줄바꿈 분석 예(이미지와 텍스트의 HTML 혼합 배열)

HTML의 텍스트 줄바꿈 분석 예(이미지와 텍스트의 HTML 혼합 배열)

高洛峰
풀어 주다: 2017-03-06 16:19:38
원래의
2804명이 탐색했습니다.

텍스트를 단어로 묶는 방법을 알고 있는데 웹페이지에서 구현하는 방법은 무엇인가요? 이것은 말처럼 쉽지 않습니다. 그러나 좋은 HTML 요소를 사용하는 한 여전히 이 효과를 얻을 수 있습니다. 일반적으로 그림 주위의 텍스트 감싸기, 텍스트 주위의 텍스트 감싸기 등 여러 가지 유형의 감싸기가 있습니다. 제가 이야기하고 싶은 것은 이 두 가지입니다. 자, 시작하겠습니다

1. 텍스트 줄 바꿈

일반적인 텍스트를 사용하는 경우 예를 들면 다음과 같습니다.

코드는 다음과 같습니다.

<TABLE cellpadding="15" width="200">
<TR>
<TD bgcolor="#EEEEFF"><IMG src="test.gif" hight=60>这里是普通的。国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。</TD>
</TR>
</TABLE>
로그인 후 복사

이렇게 문장 속 그림이 본문보다 크면 본문 위에 공백이 생깁니다. 페이지의 효과가 매우 좋지 않습니다. 어떻게 해결하나요? 이 코드를 보십시오:

코드는 다음과 같습니다:

<TABLE cellpadding="15" width="200">
<TR>
<TD bgcolor="#EEEEFF"><IMG src="test.gif" hspace="1" align="LEFT" hight=60>这里是绕排的。国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。</TD>
</TR>
</TABLE>
로그인 후 복사


문제를 해결하려면 img 요소에 이 속성을 추가하십시오: align="center", 문제는 해결될 것입니다. 간단하게 유지하세요! hspace의 경우 그림과 주변 요소의 너비를 정의합니다. 우회 여부는 중요하지 않습니다.

이 작업은 어떻게 수행되었나요? 먼저 이 코드를 살펴보겠습니다.

코드는 다음과 같습니다.

<table align=left cellspacing=0 cellpadding=0 width=200 border=1>
<tr>
<td><table align=left cellspacing=0 cellpadding=0><font color=red size="5"><b>在</b></font> </table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr>
</table>
로그인 후 복사


이 효과를 어떻게 얻을 수 있나요?

코드는 다음과 같습니다.

<table align=left cellspacing=0 cellpadding=0 width=200 border=1>
<tr>
<td><table align=left cellspacing=0 cellpadding=0><font color=red size="5"><b>在</b></font>
</table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr>
</table>
로그인 후 복사


이 코드는 똑똑하다면 한 눈에 알고 싶은 단어를 넣으면 됩니다. 이 표를 확대해 보세요.

그런데 이제 텍스트에 배경색을 적용하려면 어떻게 해야 할까요? 하, 정말 똑똑하시군요. 다음과 같이 테이블에 bgcolor 속성을 추가하세요:

코드는 다음과 같습니다:

<table align=left cellspacing=0 cellpadding=0 width=200 border=1>
<tr>
<td><table align=left cellspacing=0 cellpadding=0 bgcolor=#C0C0C0><font color=red size="5"><b>在</b></font></table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr></table>
로그인 후 복사


하지만 올 수 있을까요? 밖으로? 아니요, 다음과 같이 뭔가를 추가해야 합니다(다음번에는 너무 빨리 대답하지 마세요 :).

코드는 다음과 같습니다.

<table align=left cellspacing=0 cellpadding=0 width=200 border=1>
<tr>
<td><table align=left cellspacing=0 cellpadding=0 bgcolor=#C0C0C0><td><font color=red size="5"><b>在</b></font></td></table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr></table>
로그인 후 복사

추가 HTML 텍스트 Wrapping 배열 예제(혼합 HTML 이미지와 텍스트 배열)의 샘플 분석에 대한 관련 기사는 PHP 중국어 웹사이트에 주목하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿