CSS+Table 그림 혼합 배열 에서 텍스트 적응 그림 너비 구현(초 간단+모든 브 라 우 저 를 뛰 어 넘 음)

이것 은 문제 가 발생 한다.만약 에 그림 이 너무 작 거나 문자 가 너무 길 면 문자 가 표 전 체 를 크게 벌 린 다.즉,많은 공간 을 차지 하고 표시 효과 도 매우 아름 답지 않다.인터넷 에 도 많은 해결 방법 이 있 지만 복잡 하거나 브 라 우 저 를 뛰 어 넘 는 문 제 를 해결 하지 못 하거나 이미지 크기 변화 에 적응 하지 못 한다.이 방법 에서 해 결 했 습 니 다.코드 에 그림 크기,브 라 우 저 를 지정 하지 않 아 도 됩 니 다.아주 간단 합 니 다.마지막 효 과 는 다음 그림 에서 보 듯 이 문자 가 너무 길 면 자동 으로 줄 을 바 꾸 어 그림 너비 에 적응 합 니 다.방법 은 다음 과 같 습 니 다.1)그림 과 그림 설명 코드 는 다음 과 같 습 니 다.

홍콩 식민지의 마지막 깃발 은 영국 블 루 깃발 과 홍콩 을 대표 하 는 식민지 표지 로 구성 되 어 있 으 며 1959 년-1997 년

2)"modimg"의 정 의 는 다음 과 같 습 니 다.표 와 그림 테두리 의 CSS 스타일 을 지정 합 니 다:mdimg {margin:6px; border:1px solid #AAAAAA; padding: 3px; } .mod_img img{margin:3px; border:1px solid #AAAAAA; padding:0px; } 3）"mod_img_desc"의 정 의 는 다음 과 같 습 니 다.텍스트 를 설명 하 는 CSS 스타일 을 지정 합 니 다:.modimg_desc {font-size:12px;word-break:break-all;width:100%; overflow:auto;} 여기 서 관건 은 위의 width="10"부분 입 니 다.이것 은 텍스트 가 그림 너비 에 적응 하 는 관건 입 니 다.실제로 10 은 아주 작은 값 입 니 다.일반 그림 은 모두 이 값 보다 크 고 표 에 그림 을 표시 할 때 그림 은 자신의 실제 크기 에 따라 이 표를 펼 치기 때문에 이 width 는 그림 의 표시 에 영향 을 주지 않 습 니 다.3)에서 텍스트 의 width 를 100%로 지정 했다.즉,문 자 는 실제 너비 에 따라 표시 되 고 이 너비 가 얼마 든 텍스트 가 폭 을 초과 할 때 자동 으로 줄 을 바꾼다.테스트 를 통 해 이 방법 은 IE/Firefox/safari/Opera 등 브 라 우 저 에서 완벽 하 게 정상적으로 작 동 할 수 있 습 니 다!즐 거 운 시간 되 세 요.