지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > CSS의 float 속성을 사용하여 보조 반응형 페이지 구현

CSS의 float 속성을 사용하여 보조 반응형 페이지 구현

不言
풀어 주다： 2018-11-09 16:26:19
원래의
2934명이 탐색했습니다.

이 문서에서는 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     style="max-width:90%" src="image/flower.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img     style="max-width:90%" src="image/flowers.jpg"/ alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn"><img     style="max-width:90%" src="image/fruit.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img     style="max-width:90%" src="image/greatwall.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn"><img     style="max-width:90%" src="image/1.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img     style="max-width:90%" src="image/keiskei.jpg" / 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;
}
로그인 후 복사

가 브라우저에 미치는 영향은 다음과 같습니다.

CSS의 float 속성을 사용하여 보조 반응형 페이지 구현

보충: 이미지를 프레임 중앙에 표시합니다

이미지를 프레임 중앙에 표시하는 경우 프레임을 사용하려면 이미지의 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     style="max-width:90%" src="image/flower.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/flowers.jpg"/ alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img     style="max-width:90%" src="image/fruit.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/greatwall.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img     style="max-width:90%" src="image/1.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/keiskei.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>
로그인 후 복사

효과는 다음과 같습니다. 이미지가 중앙에 표시됩니다.

CSS의 float 속성을 사용하여 보조 반응형 페이지 구현

페이지에 반응형 표시

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     style="max-width:90%" src="image/flower.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/flowers.jpg"/ alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img     style="max-width:90%" src="image/fruit.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/greatwall.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img     style="max-width:90%" src="image/1.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/keiskei.jpg" / 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 이렇게:

CSS의 float 속성을 사용하여 보조 반응형 페이지 구현

여기에서 너비를 줄이면 아래 이미지와 같이 변경됩니다. 플로트로 왼쪽 정렬되지만 너비가 좁아지기 때문에 래핑된 디스플레이가 됩니다. 이때, 이미지가 오른쪽 테두리에 있는 경우에는 이미지 위에 해당 이미지의 설명문이 표시되고, 이미지 하단에는 왼쪽에 있는 설명문이 표시됩니다.

CSS의 float 속성을 사용하여 보조 반응형 페이지 구현

응답 예:

이전 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     style="max-width:90%" src="image/flower.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>

    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img     style="max-width:90%" src="image/flowers.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>

    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img     style="max-width:90%" src="image/fruit.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>

    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img     style="max-width:90%" src="image/greatwall.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img     style="max-width:90%" src="image/1.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img     style="max-width:90%" src="image/keiskei.jpg" / 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가 지정된 프레임에서도 앞에서 설명한 설명문 배치가 먼저 수행되므로 프레임을 설명하는 텍스트가 이미지 위에 표시됩니다.

효과는 다음과 같습니다:

CSS의 float 속성을 사용하여 보조 반응형 페이지 구현

창 너비를 줄입니다. 프레임은 접히지만 설명 텍스트는 이미지 전체에 고르게 표시됩니다.

CSS의 float 속성을 사용하여 보조 반응형 페이지 구현

이전 코드를 기반으로 실제 예제를 살펴보겠습니다

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="image/flower.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="image/flowers.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img  src="image/fruit.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="image/greatwall.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img  src="image/1.jpg" / alt="CSS의 float 속성을 사용하여 보조 반응형 페이지 구현" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="image/keiskei.jpg" / 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%로 표시됩니다. 따라서 열에 표시됩니다.

효과는 다음과 같습니다.

CSS의 float 속성을 사용하여 보조 반응형 페이지 구현

창의 너비가 760픽셀 이상이면 두 개의 열로 표시됩니다.

CSS의 float 속성을 사용하여 보조 반응형 페이지 구현

창 너비가 760픽셀 이하가 되면 1열이 됩니다. 이미지의 너비도 가로 너비의 80%입니다.

CSS의 float 속성을 사용하여 보조 반응형 페이지 구현

CSS의 float 속성을 사용하여 보조 반응형 페이지 구현

위 내용은 CSS의 float 속성을 사용하여 보조 반응형 페이지 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
부동 속성
원천：php.cn
이전 기사：설정된 이미지 효과를 사용하는 방법은 무엇입니까? (코드 예) 다음 기사：CSS에서 텍스트 줄 간격을 설정하는 방법 소개(코드 예)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Width 속성을 추가하여 콘텐츠를 왼쪽으로 이동합니다. 나는 본문에 여백을 제공했습니다. main {left margin: 200px; right margin: 200px; text alignment: center} ...
에서 2024-04-06 22:01:35
0
3
816
CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까? 한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽...
에서 2024-04-06 20:45:26
0
2
386
MySQL SQL 쿼리를 사용하여 다른 테이블의 필드 합계를 계산합니다. 다음과 같은 스키마가 있습니다. "user_id" 및 "username" 속성이 있는 사용자 테이블과 "custome...
에서 2024-04-06 19:39:29
0
1
441
사이트에 CSS 스타일이 적용되지 않음 Bootstrap5를 사용하여 웹사이트를 만들고 있는데 index.css 속성이 index.html에 적용되지 않습니다. 서비스 카드 위로 마우스를 가져가면 배경...
에서 2024-04-06 17:12:23
0
1
336
JSON 중첩 배열 속성 "project_id" 및 "project_name"을 변경하는 방법 问题：[{"project_id":1,"project_name":"CDP","role":&q...
에서 2024-04-06 15:39:51
0
1
466
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿