웹페이지_HTML/Xhtml_웹페이지 제작시 웹 테이블이나 div 레이어가 늘어나는 현상에 대한 솔루션

우리는 웹페이지를 디자인할 때 항상 불쾌한 일에 직면합니다. 가장 흔한 것은 백그라운드에서 콘텐츠를 추가한 후 표시되는 페이지가 늘어나서 웹페이지가 매우 보기 흉해지는 것을 발견하는 것입니다. 과거에는 누구나 기본적으로 테이블을 디자인했고, 인터넷에는 당연히 많은 솔루션이 있었지만 요즘에는 div CSS 표준 디자인도 있으며, 이제 Xiaoxiang Online에서는 테이블을 방지하는 좋은 방법을 찾기가 어렵습니다. 그것을 요약하고 모든 사람과 공유하십시오.
1. 웹페이지에서 직접 이미지 크기를 설정합니다. 예: 이미지 크기가 제한될 수 있지만 이미지를 업로드하기 전에 이미지 크기를 수동으로 수정해야 합니다. 그렇지 않으면 업로드된 이미지가 변형.
2. 다음 코드를 사용하세요:
이 방법은 이미지를 호출할 때 자동으로 지정된 너비로 축소됩니다. 이미지가 변형되지 않으며 테이블이 터지지도 않습니다. 그러나 이미지가 너무 크면 이미지가 깨지지 않는다는 단점이 있습니다. 즉, 이미지 표시 프로세스 중에 이미지가 먼저 원래 크기로 표시됩니다. 이때 테이블이 터지고 페이지가 보기 흉해집니다. 표시되면 이미지가 자동으로 다시 축소됩니다.
3. 테이블 속성이 늘어나는 것을 방지하기 위해 크기를 제한할 수 있습니다. 예를 들어 "style="table-layout:fixed;word-wrap:break-word;word-break;break" 코드를 추가합니다. " in -all;"", 여기서 "table-layout:fixed;"는 테이블 레이아웃을 수정하여 테이블이 늘어나는 것을 효과적으로 방지할 수 있으며 "word-wrap:break-word;"는 줄 바꿈 제어, 즉 강제 줄 바꿈 텍스트 내용이 많을 때, 특히 반복되는 내용이 나타날 때 사용해야 합니다. 줄 바꿈을 수행하지 않으면 표가 늘어납니다. -all;"은 IE를 해결할 수 있습니다. 문제는 프레임이 영어(비아시아 언어 텍스트 줄)로 늘어나지만 강제로 줄바꿈이 되지 않고 테이블 너비 내의 내용만 표시된다는 것입니다. 일반적인 상황에서는 "style="table-layout:fixed;word-wrap:break-word;""를 사용하세요. 물론 위에서 호출한 문은 CSS에서 다음과 같이 정의할 수 있습니다.
테이블 {
테이블 레이아웃: 고정;
word-wrap:break-word;
}
4. CSS를 사용하여 이미지의 적응형 크기를 제어합니다.
img {
최대 너비: 600px;
너비:표현식(this.width > 600 ? "600px" : this.width);
overflow:hidden;
}
그 중 max-width: 600px; IE7, FireFox 및 기타 IE가 아닌 브라우저에서는 최대 너비가 600px이지만 IE6에서는 모든 브라우저에서 유효하지 않습니다. 600px, 사진 크기가 600px보다 크면 자동으로 600px로 줄어듭니다. 이는 IE6에서 유효하며,overflow:hidden은 설정된 크기를 초과하는 부분을 숨겨서 이미지의 확산과 변형을 방지하는 것을 의미합니다. 이미지 크기 조절 실패로 인한 테이블입니다.
5. 마지막으로 가장 실용적인 코드를 요약합니다.
양식인 경우 다음을 사용하세요.
테이블 {
테이블 레이아웃: 고정;
단어 구분: 모두 중단;
}
div 레이어인 경우 다음을 사용하세요.

div {
table-layout: 고정;
word-wrap: break-word;
width: plus width;
overflow: Hidden; 🎜>}