웹 프론트엔드 HTML 튜토리얼 웹페이지_HTML/Xhtml_웹페이지 제작시 웹 테이블이나 div 레이어가 늘어나는 현상에 대한 솔루션

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

May 16, 2016 pm 04:44 PM
암호 할 수 있다 그림 크기 보여주다 웹페이지 시트 해결하다


우리는 웹페이지를 디자인할 때 항상 불쾌한 일에 직면합니다. 가장 흔한 것은 백그라운드에서 콘텐츠를 추가한 후 표시되는 페이지가 늘어나서 웹페이지가 매우 보기 흉해지는 것을 발견하는 것입니다. 과거에는 누구나 기본적으로 테이블을 디자인했고, 인터넷에는 당연히 많은 솔루션이 있었지만 요즘에는 div CSS 표준 디자인도 있으며, 이제 Xiaoxiang Online에서는 테이블을 방지하는 좋은 방법을 찾기가 어렵습니다. 그것을 요약하고 모든 사람과 공유하십시오.
1. 웹페이지에서 직접 이미지 크기를 설정합니다. 예: 웹페이지_HTML/Xhtml_웹페이지 제작시 웹 테이블이나 div 레이어가 늘어나는 현상에 대한 솔루션 이미지 크기가 제한될 수 있지만 이미지를 업로드하기 전에 이미지 크기를 수동으로 수정해야 합니다. 그렇지 않으면 업로드된 이미지가 변형.
2. 다음 코드를 사용하세요: 웹페이지_HTML/Xhtml_웹페이지 제작시 웹 테이블이나 div 레이어가 늘어나는 현상에 대한 솔루션
이 방법은 이미지를 호출할 때 자동으로 지정된 너비로 축소됩니다. 이미지가 변형되지 않으며 테이블이 터지지도 않습니다. 그러나 이미지가 너무 크면 이미지가 깨지지 않는다는 단점이 있습니다. 즉, 이미지 표시 프로세스 중에 이미지가 먼저 원래 크기로 표시됩니다. 이때 테이블이 터지고 페이지가 보기 흉해집니다. 표시되면 이미지가 자동으로 다시 축소됩니다.
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; 🎜>}
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PPT 표에 삽입된 그림의 형식을 조정하는 단계 PPT 표에 삽입된 그림의 형식을 조정하는 단계 Mar 26, 2024 pm 04:16 PM

1. 예시처럼 새 PPT 파일을 만들고 이름을 [PPT Tips]로 지정합니다. 2. [PPT 팁]을 더블클릭하여 PPT 파일을 엽니다. 3. 예를 들어 행 2개와 열 2개로 구성된 표를 삽입합니다. 4. 테이블 테두리를 더블클릭하면 상단 툴바에 [디자인] 옵션이 나타납니다. 5. [음영] 옵션을 클릭한 후 [그림]을 클릭하세요. 6. [그림]을 클릭하면 그림을 배경으로 채우기 옵션 대화 상자가 나타납니다. 7. 디렉토리에서 삽입하려는 트레이를 찾은 후 확인을 클릭하여 그림을 삽입하세요. 8. 테이블 상자를 마우스 오른쪽 버튼으로 클릭하여 설정 대화 상자를 불러옵니다. 9. [셀 서식]을 클릭하고 [이미지를 음영으로 배열]을 선택하세요. 10. [중앙], [미러] 및 기타 필요한 기능을 설정한 후 확인을 클릭하세요. 참고: 기본값은 테이블에 그림을 채우는 것입니다.

Black Shark 휴대폰이 켜지지 않는 문제를 해결하는 방법을 알려주는 5가지 팁! Black Shark 휴대폰이 켜지지 않는 문제를 해결하는 방법을 알려주는 5가지 팁! Mar 24, 2024 pm 12:27 PM

스마트폰 기술이 계속해서 발전하면서 휴대폰은 우리 일상생활에서 점점 더 중요한 역할을 하고 있습니다. Black Shark 휴대폰은 게이밍 성능에 중점을 둔 플래그십 휴대폰으로 플레이어들에게 큰 호응을 얻고 있습니다. 그러나 때로는 Black Shark 휴대폰을 켤 수 없는 상황에 직면하기도 합니다. 이때 이 문제를 해결하기 위해 몇 가지 조치를 취해야 합니다. 다음으로 Black Shark 휴대폰이 켜지지 않는 문제를 해결하는 방법을 알려주는 5가지 팁을 공유하겠습니다. 1단계: 배터리 전원을 확인하세요. 먼저 Black Shark 휴대폰의 전원이 충분한지 확인하세요. 휴대폰 배터리가 방전되었기 때문일 수 있습니다.

Xiaohongshu에 게시할 때 사진이 자동으로 저장되는 문제를 해결하는 방법은 무엇입니까? 포스팅 시 자동으로 저장되는 이미지는 어디에 있나요? Xiaohongshu에 게시할 때 사진이 자동으로 저장되는 문제를 해결하는 방법은 무엇입니까? 포스팅 시 자동으로 저장되는 이미지는 어디에 있나요? Mar 22, 2024 am 08:06 AM

소셜 미디어의 지속적인 발전으로 Xiaohongshu는 점점 더 많은 젊은이들이 자신의 삶을 공유하고 아름다운 것을 발견할 수 있는 플랫폼이 되었습니다. 많은 사용자들이 이미지 게시 시 자동 저장 문제로 고민하고 있습니다. 그렇다면 이 문제를 해결하는 방법은 무엇입니까? 1. Xiaohongshu에 게시할 때 사진이 자동으로 저장되는 문제를 해결하는 방법은 무엇입니까? 1. 캐시 지우기 먼저 Xiaohongshu의 캐시 데이터를 지워볼 수 있습니다. 단계는 다음과 같습니다. (1) Xiaohongshu를 열고 오른쪽 하단에 있는 "내" 버튼을 클릭합니다. (2) 개인 센터 페이지에서 "설정"을 찾아 클릭합니다. 캐시 지우기' 옵션을 선택하고 확인을 클릭하세요. 캐시를 삭제한 후 샤오홍슈에 다시 진입하여 사진을 올려 자동 저장 문제가 해결되었는지 확인해 보세요. 2. Xiaohongshu 버전을 업데이트하여 Xiaohongshu를 확인하세요.

TikTok 댓글에 사진을 게시하는 방법은 무엇입니까? 댓글란에 있는 사진의 입구는 어디인가요? TikTok 댓글에 사진을 게시하는 방법은 무엇입니까? 댓글란에 있는 사진의 입구는 어디인가요? Mar 21, 2024 pm 09:12 PM

Douyin 짧은 동영상의 인기로 인해 댓글 영역의 사용자 상호 작용이 더욱 다채로워졌습니다. 일부 사용자는 자신의 의견이나 감정을 더 잘 표현하기 위해 댓글로 이미지를 공유하기를 원합니다. 그렇다면 TikTok 댓글에 사진을 게시하는 방법은 무엇입니까? 이 기사에서는 이 질문에 대해 자세히 답변하고 몇 가지 관련 팁과 예방 조치를 제공합니다. 1. Douyin 댓글에 사진을 어떻게 게시하나요? 1. Douyin 열기: 먼저 Douyin 앱을 열고 계정에 로그인해야 합니다. 2. 댓글 영역 찾기: 짧은 동영상을 탐색하거나 게시할 때 댓글을 달고 싶은 위치를 찾아 "댓글" 버튼을 클릭하세요. 3. 댓글 내용 입력: 댓글 영역에 댓글 내용을 입력합니다. 4. 사진 전송 선택: 댓글 내용 입력 인터페이스에 "사진" 버튼 또는 "+" 버튼이 표시됩니다.

판매 예측 테이블을 만드는 방법 판매 예측 테이블을 만드는 방법 Mar 20, 2024 pm 03:06 PM

능숙하게 양식을 작성할 수 있다는 것은 회계, 인사, 재무에 필요한 기술일 뿐만 아니라 많은 영업사원에게도 매우 중요합니다. 왜냐하면 매출과 관련된 데이터는 매우 크고 복잡하며, 문제를 설명하기 위해 단순히 문서에 기록할 수는 없기 때문입니다. 더 많은 영업사원들이 엑셀을 능숙하게 활용하여 테이블을 만들 수 있도록 편집자가 판매예측에 관한 테이블 만들기 이슈를 소개합니다. 1. [매출 예측 및 목표 설정], xlsm을 열어 각 테이블에 저장된 데이터를 분석합니다. 2. 새로운 [빈 워크시트]를 생성하고 [셀]을 선택한 후 [라벨 정보]를 입력하세요. 아래로 [드래그]하여 달을 [채우세요]. [기타] 데이터를 입력한 후 [

PPT 사진을 하나씩 나타나게 하는 방법 PPT 사진을 하나씩 나타나게 하는 방법 Mar 25, 2024 pm 04:00 PM

파워포인트에서는 그림을 하나씩 표시하는 것이 일반적인 기술인데, 이는 애니메이션 효과를 설정하면 가능하다. 이 가이드에서는 기본 설정, 이미지 삽입, 애니메이션 추가, 애니메이션 순서 및 타이밍 조정 등 이 기술을 구현하는 단계를 자세히 설명합니다. 또한 트리거 사용, 애니메이션 속도 및 순서 조정, 애니메이션 효과 미리보기 등의 고급 설정 및 조정이 제공됩니다. 이러한 단계와 팁을 따르면 사용자는 PowerPoint에서 그림이 차례로 표시되도록 쉽게 설정할 수 있으므로 프레젠테이션의 시각적 효과가 향상되고 청중의 관심을 끌 수 있습니다.

조건에 따라 자동으로 색상이 변경되도록 WPS 값을 설정하는 방법_조건에 따라 자동으로 색상이 변경되도록 WPS 테이블 값을 설정하는 단계 조건에 따라 자동으로 색상이 변경되도록 WPS 값을 설정하는 방법_조건에 따라 자동으로 색상이 변경되도록 WPS 테이블 값을 설정하는 단계 Mar 27, 2024 pm 07:30 PM

1. 워크시트를 열고 [시작]-[조건부 서식] 버튼을 찾습니다. 2. 열 선택을 클릭하고 조건부 서식을 추가할 열을 선택합니다. 3. [조건부 서식] 버튼을 클릭하면 옵션 메뉴가 나타납니다. 4. [조건부규칙 강조]-[사이]를 선택하세요. 5. 20, 24, 진한 녹색 텍스트와 어두운 채우기 색상 규칙을 입력합니다. 6. 확인 후, 선택한 열의 데이터는 설정에 따라 해당 숫자, 텍스트 및 셀 상자로 색상이 지정됩니다. 7. 충돌하지 않는 조건부 규칙은 반복적으로 추가할 수 있지만, 충돌하는 규칙의 경우 WPS는 이전에 설정된 조건부 규칙을 마지막에 추가된 규칙으로 대체합니다. 8. [사이] 규칙 20-24 및 [보다 작음] 20 뒤에 셀 열을 반복적으로 추가합니다. 9. 규칙을 변경해야 하는 경우 규칙을 삭제한 다음 규칙을 재설정하면 됩니다.

wps 문서에서 두 장의 사진을 나란히 정렬하는 방법 wps 문서에서 두 장의 사진을 나란히 정렬하는 방법 Mar 20, 2024 pm 04:00 PM

WPS 사무용 소프트웨어를 사용할 때 하나의 양식만 사용되는 것이 아니라 텍스트에 표와 그림을 추가할 수 있고 표에 그림도 추가할 수 있다는 사실을 발견했습니다. 이 모든 것이 함께 사용되어 전체 문서의 내용을 구성합니다. 문서에 두 개의 그림을 삽입하고 나란히 정렬해야 하는 경우 더 풍부해 보입니다. 다음 과정에서는 이 문제를 해결할 수 있습니다: wps 문서에 두 장의 그림을 나란히 배치하는 방법입니다. 1. 먼저 WPS 소프트웨어를 열고 조정하려는 사진을 찾아야 합니다. 사진을 마우스 왼쪽 버튼으로 클릭하면 메뉴 표시줄이 나타나며 "페이지 레이아웃"을 선택합니다. 2. 텍스트 줄 바꿈에서 "Tight 줄 바꿈"을 선택합니다. 3. 필요한 모든 사진이 "단단한 텍스트 줄 바꿈"으로 설정되었는지 확인한 후 사진을 적절한 위치로 끌어서 첫 번째 사진을 클릭할 수 있습니다.

See all articles