简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS の float 属性を使用して二次レスポンシブ ページを実装する

CSS の float 属性を使用して二次レスポンシブ ページを実装する

不言
不言オリジナル
2018-11-09 16:26:192882ブラウズ

この記事では、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 属性を使用して二次レスポンシブ ページを実装する

補足: フレームの中央に画像を表示します。

画像をフレームの中央に表示する場合は、テキストを設定する必要があります。整列: 画像の中央に配置します。

コードは次のとおりです:

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;
}

効果は次のとおりです。以下:

CSS の float 属性を使用して二次レスポンシブ ページを実装する

ここで幅を小さくすると下の画像のようになります。 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;
}

説明:

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 メディア クエリを使用しており、Web ブラウザーの幅が 760 ピクセル以下の場合、float は none に設定され、列は抑制されます。また、画像は画面幅の 80% で表示されます。したがって、列に表示されます。

結果は次のとおりです。

CSS の float 属性を使用して二次レスポンシブ ページを実装する

ウィンドウの幅が 760 ピクセル以上の場合、2 列で表示されます。

CSS の float 属性を使用して二次レスポンシブ ページを実装する

#ウィンドウの幅が 760 ピクセル以下になると 1 列になります。画像の幅も横幅の 80% になります。

CSS の float 属性を使用して二次レスポンシブ ページを実装する

CSS の float 属性を使用して二次レスポンシブ ページを実装する

以上がCSS の float 属性を使用して二次レスポンシブ ページを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：セット画像効果を使用するにはどうすればよいですか? (コード例)次の記事：セット画像効果を使用するにはどうすればよいですか? (コード例)

関連記事

続きを見る