コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > 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 属性を使用して二次レスポンシブ ページを実装する

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

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

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

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 サイトの他の関連記事を参照してください。

関連ラベル：
フロート属性
ソース：php.cn
前の記事：セット画像効果を使用するにはどうすればよいですか? (コード例) 次の記事：CSSで文字の行間を設定する方法の紹介（コード例）
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、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
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート