简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  CSS의 float 속성을 사용하여 보조 반응형 페이지 구현

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

不言
不言원래의
2018-11-09 16:26:192879검색

이 문서에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：설정된 이미지 효과를 사용하는 방법은 무엇입니까? (코드 예)다음 기사：설정된 이미지 효과를 사용하는 방법은 무엇입니까? (코드 예)

관련 기사

더보기