이 문서에서는 CSS 부동 속성을 사용하여 보조 반응형 페이지를 구현하는 방법을 소개합니다. 내용은 매우 상세하며 특정 참조 가치가 있습니다.
말할 것도 없이 바로 본문으로 들어가겠습니다~
float:left 속성을 사용하여 보조 반응형 페이지를 구현합니다(추천 과정: CSS 비디오 튜토리얼)
코드는 다음과 같습니다.
LRColumnSimple.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="LRColumnSimple.css" />
<meta charset="utf-8" />
</head>
<body>
<div class="Container">
<div class="LeftColumn">说明文字</div>
<div class="RightColumn"><img src="/static/imghwm/default1.png" data-src="image/flower.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="LeftColumn"><img src="/static/imghwm/default1.png" data-src="image/flowers.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="RightColumn">说明文字</div>
<div class="EndColumn"></div>
<div class="LeftColumn">说明文字</div>
<div class="RightColumn"><img src="/static/imghwm/default1.png" data-src="image/fruit.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="LeftColumn"><img src="/static/imghwm/default1.png" data-src="image/greatwall.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="RightColumn">说明文字</div>
<div class="EndColumn"></div>
<div class="LeftColumn">说明文字</div>
<div class="RightColumn"><img src="/static/imghwm/default1.png" data-src="image/1.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="LeftColumn"><img src="/static/imghwm/default1.png" data-src="image/keiskei.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="RightColumn">说明文字</div>
<div class="EndColumn"></div>
</div>
</body>
</html> LRColumnSimple.css
body {
background-color:#C0C0C0;
}
.Container {
background-color:#FFFFFF;
width:760px;
margin-left:auto;
margin-right:auto;
}
.LeftColumn {
float:left;
width:360px;
}
.RightColumn {
float:left;
width:360px;
}
.EndColumn {
clear:left;
}가 브라우저에 미치는 영향은 다음과 같습니다.
보충: 이미지를 프레임 중앙에 표시합니다
이미지를 프레임 중앙에 표시하는 경우 프레임을 사용하려면 이미지의 text-align: center를 설정해야 합니다.
코드는 다음과 같습니다.
LRColumnSimpleImageCenter.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="LRColumnSimple.css" />
<meta charset="utf-8" />
</head>
<body>
<div class="Container">
<div class="LeftColumn">说明文字</div>
<div class="RightColumn" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/flower.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="LeftColumn" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/flowers.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="RightColumn">说明文字</div>
<div class="EndColumn"></div>
<div class="LeftColumn">说明文字</div>
<div class="RightColumn" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/fruit.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="LeftColumn" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/greatwall.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="RightColumn">说明文字</div>
<div class="EndColumn"></div>
<div class="LeftColumn">说明文字</div>
<div class="RightColumn" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/1.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="LeftColumn" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/keiskei.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="RightColumn">说明文字</div>
<div class="EndColumn"></div>
</div>
</body>
</html>효과는 다음과 같습니다. 이미지가 중앙에 표시됩니다.
페이지에 반응형 표시
LRColumnSimpleResponsiveW1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsiveW1.css" />
<meta charset="utf-8" />
</head>
<body>
<div class="Container">
<div class="LeftColumn">说明文字</div>
<div class="RightColumn" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/flower.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="LeftColumn" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/flowers.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="RightColumn">说明文字</div>
<div class="EndColumn"></div>
<div class="LeftColumn">说明文字</div>
<div class="RightColumn" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/fruit.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="LeftColumn" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/greatwall.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="RightColumn">说明文字</div>
<div class="EndColumn"></div>
<div class="LeftColumn">说明文字</div>
<div class="RightColumn" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/1.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="LeftColumn" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/keiskei.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="RightColumn">说明文字</div>
<div class="EndColumn"></div>
</div>
</body>
</html> LRColumnSimpleResponsiveW1.css
body {
background-color:#C0C0C0;
}
.Container {
background-color:#FFFFFF;
width:70%;
margin-left:auto;
margin-right:auto;
}
.LeftColumn {
float:left;
width:360px;
}
.RightColumn {
float:left;
width:360px;
}
.EndColumn {
clear:left;
}Effect 이렇게:
여기에서 너비를 줄이면 아래 이미지와 같이 변경됩니다. 플로트로 왼쪽 정렬되지만 너비가 좁아지기 때문에 래핑된 디스플레이가 됩니다. 이때, 이미지가 오른쪽 테두리에 있는 경우에는 이미지 위에 해당 이미지의 설명문이 표시되고, 이미지 하단에는 왼쪽에 있는 설명문이 표시됩니다.
응답 예:
이전 HTML에서는 창 너비가 좁아지고 프레임이 축소되는 경우 설명 텍스트의 위치가 동일할 수 없는 문제가 있었습니다. 이런 현상을 방지하기 위한 코드를 소개하겠습니다.
LRColumnSimpleResponsiveW2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsiveW2.css" />
<meta charset="utf-8" />
</head>
<body>
<div class="Container">
<div class="TextColumnA">说明文字</div>
<div class="ImageColumnA" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/flower.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="TextColumnB">说明文字</div>
<div class="ImageColumnB" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/flowers.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="TextColumnA">说明文字</div>
<div class="ImageColumnA" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/fruit.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="TextColumnB">说明文字</div>
<div class="ImageColumnB" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/greatwall.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="TextColumnA">说明文字</div>
<div class="ImageColumnA" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/1.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="TextColumnB">说明文字</div>
<div class="ImageColumnB" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/keiskei.jpg" class="lazy" style="max-width:90%" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
</div>
</body>
</html>LRColumnSimpleResponsiveW2.css
body {
background-color:#C0C0C0;
}
.Container {
background-color:#FFFFFF;
width:70%;
margin-left:auto;
margin-right:auto;
}
.TextColumnA {
float:left;
width:360px;
}
.ImageColumnA {
float:left;
width:360px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.TextColumnB {
float:right;
width:360px;
}
.ImageColumnB {
float:right;
width:360px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.EndColumn {
clear:both;
}Description:
TextColumnA 및 ImageColumnA 클래스는 왼쪽의 설명 텍스트에 사용되고 프레임은 오른쪽의 이미지를 표시하는 데 사용됩니다. 이러한 클래스의 경우 float:left가 지정되고 앞서 설명한 설명문이 왼쪽에 있고 이미지가 오른쪽에 있습니다. 반면에 TextColumnB 및 ImageColumnB 클래스는 오른쪽의 설명 텍스트에 사용되고 프레임은 왼쪽의 이미지를 표시하는 데 사용됩니다. 이러한 클래스에서는 float:right가 지정되므로 앞에서 설명한 설명 텍스트가 오른쪽에 배치되고 이미지가 왼쪽에 배치됩니다.
창 너비가 좁아지면 앞서 설명한 프레임이 먼저 float:left 프레임에 표시됩니다. float:right가 지정된 프레임에서도 앞에서 설명한 설명문 배치가 먼저 수행되므로 프레임을 설명하는 텍스트가 이미지 위에 표시됩니다.
효과는 다음과 같습니다:
창 너비를 줄입니다. 프레임은 접히지만 설명 텍스트는 이미지 전체에 고르게 표시됩니다.
이전 코드를 기반으로 실제 예제를 살펴보겠습니다
LRColumnSimpleResponsive.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsive.css" />
<meta charset="utf-8" />
</head>
<body>
<div class="Container">
<div class="TextColumnA">说明文字</div>
<div class="ImageColumnA" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/flower.jpg" class="lazy" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="TextColumnB">说明文字</div>
<div class="ImageColumnB" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/flowers.jpg" class="lazy" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="TextColumnA">说明文字</div>
<div class="ImageColumnA" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/fruit.jpg" class="lazy" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="TextColumnB">说明文字</div>
<div class="ImageColumnB" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/greatwall.jpg" class="lazy" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="TextColumnA">说明文字</div>
<div class="ImageColumnA" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/1.jpg" class="lazy" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
<div class="TextColumnB">说明文字</div>
<div class="ImageColumnB" style="text-align:center;"><img src="/static/imghwm/default1.png" data-src="image/keiskei.jpg" class="lazy" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
<div class="EndColumn"></div>
</div>
</body>
</html>LRColumnSimpleResponsive.css
body {
background-color:#C0C0C0;
}
.Container {
background-color:#FFFFFF;
width:760px;
margin-left:auto;
margin-right:auto;
}
.TextColumnA {
float:left;
width:360px;
}
.ImageColumnA {
float:left;
width:360px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.ImageColumnA img{
width:200px;
}
.TextColumnB {
float:right;
width:360px;
}
.ImageColumnB {
float:right;
width:360px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.ImageColumnB img{
width:200px;
}
.EndColumn {
clear:both;
}
@media screen and (max-width: 760px) {
.Container {
width:95%;
}
.TextColumnA {
float:none;
width:100%;
}
.ImageColumnA {
float:none;
width:100%;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.ImageColumnA img{
width:80%;
}
.TextColumnB {
width:100%;
}
.ImageColumnB {
width:100%;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.ImageColumnB img{
width:80%;
}
}설명:
이전 코드와 동일하지만 CSS 미디어 쿼리를 사용하면 웹 탐색 컨테이너 너비가 760픽셀 이하인 경우 float를 없음으로 설정하고 열을 억제합니다. 또한 이미지는 화면 너비의 80%로 표시됩니다. 따라서 열에 표시됩니다.
효과는 다음과 같습니다.
창의 너비가 760픽셀 이상이면 두 개의 열로 표시됩니다.
창 너비가 760픽셀 이하가 되면 1열이 됩니다. 이미지의 너비도 가로 너비의 80%입니다.
위 내용은 CSS의 float 속성을 사용하여 보조 반응형 페이지 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
@keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?Apr 18, 2025 am 11:34 AM나는 다른 날이 질문을 받았다. 나의 첫 번째 생각은 : 이상한 질문입니다! 특이성은 선택기에 관한 것이며 At-Rules는 선택기가 아니므로 ... 무의미합니까?
@Media 및 @Support 쿼리를 중첩 할 수 있습니까?Apr 18, 2025 am 11:32 AM그렇습니다. 당신은 할 수 있습니다. 그리고 그것은 실제로 어떤 순서로 중요하지 않습니다. CSS 전 처리기가 필요하지 않습니다. 일반 CSS에서 작동합니다.
빠른 Gulp 캐시 파열Apr 18, 2025 am 11:23 AMCSS 및 JavaScript (및 이미지 및 글꼴 등)와 같은 자산에 멀리 떨어진 캐시 헤더를 설정해야합니다. 브라우저를 알려줍니다
CSS의 품질과 복잡성을 모니터링하는 스택을 찾아Apr 18, 2025 am 11:22 AM많은 개발자들은 CSS 코드베이스를 유지하는 방법에 대해 글을 썼지 만 코드베이스의 품질을 어떻게 측정하는지에 대해 많은 글을 쓰지 않습니다. 물론, 우리는 가지고 있습니다
Datalist는 가치를 시행하지 않고 값을 제안하는 것입니다Apr 18, 2025 am 11:08 AM짧고 임의의 텍스트를 수락 해야하는 양식이 있습니까? 이름이나 다른 것 같습니다. 정확히 무엇을위한 것입니다. 많은 것이 있습니다
취리히에서 열린 전면 회의Apr 18, 2025 am 11:03 AM나는 프론트 컨퍼런스를 위해 스위스 취리히로 향하게되어 매우 기쁩니다 (그 이름과 URL을 사랑합니다!). 나는 전에 스위스에 가본 적이 없기 때문에 나는 흥분했다
CloudFlare Workers와 함께 풀 스택 서버리스 애플리케이션 구축Apr 18, 2025 am 10:58 AM소프트웨어 개발에서 제가 가장 좋아하는 개발 중 하나는 서버리스의 출현이었습니다. 세부 사항에 푹 빠지는 경향이있는 개발자로서
NUXT 응용 프로그램에서 동적 경로 생성Apr 18, 2025 am 10:53 AM이 게시물에서는 들어오는 데이터를 위해 동적 경로를 만드는 방법을 보여주기 위해 NetLify에 구축하고 배포 한 전자 상거래 상점 데모를 사용합니다. 상당히입니다
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
3 몇 주 전ByDDD
Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법
2 몇 주 전ByDDD
Will R.E.P.O. 크로스 플레이가 있습니까?
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
뜨거운 도구
WebStorm Mac 버전
유용한 JavaScript 개발 도구
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
