communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > le corps du texte

Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire

不言
Libérer： 2018-11-09 16:26:19
original
2923 Les gens l'ont consulté

Cet article vous présente l'utilisation des attributs CSS float pour implémenter des pages réactives secondaires. Le contenu est très détaillé et a une certaine valeur de référence.

Sans plus tard, passons directement au texte~

Nous utilisons l'attribut float: left pour implémenter une page responsive secondaire (cours recommandé : Tutoriel vidéo CSS)

Le code est le suivant :

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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img     style="max-width:90%" src="image/flowers.jpg"/ alt="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img     style="max-width:90%" src="image/greatwall.jpg" / alt="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img     style="max-width:90%" src="image/keiskei.jpg" / alt="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>
Copier après la connexion

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;
}
Copier après la connexion

L'effet sur le navigateur est la suivante :

Utilisez lattribut float de CSS pour implémenter une page réactive secondaire

Supplément : Afficher l'image au milieu du cadre

Si vous affichez l'image au milieu du cadre, il vous faut pour définir l'alignement du texte : centre de l'image.

Le code est le suivant :

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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/flowers.jpg"/ alt="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/greatwall.jpg" / alt="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/keiskei.jpg" / alt="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>
Copier après la connexion

L'effet est le suivant : l'image est affichée au milieu

Utilisez lattribut float de CSS pour implémenter une page réactive secondaire

Affichage responsive sur la page

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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/flowers.jpg"/ alt="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/greatwall.jpg" / alt="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/keiskei.jpg" / alt="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>
Copier après la connexion

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;
}
Copier après la connexion

L'effet est le suivant :

Utilisez lattribut float de CSS pour implémenter une page réactive secondaire

Si vous réduisez la largeur ici, elle ressemblera à l'image ci-dessous. Il est aligné à gauche avec un flotteur, mais comme la largeur est réduite, il devient un affichage enveloppé. A ce moment, lorsque l'image se trouve sur la bordure droite, le texte de description de l'image est affiché sur l'image et le texte de description de gauche est affiché en bas de l'image.

Utilisez lattribut float de CSS pour implémenter une page réactive secondaire

Exemple de réponse :

Dans le HTML précédent, il y avait le problème suivant : lorsque la largeur de la fenêtre se rétrécissait et que le cadre était réduit, la description La position du texte ne peut pas être une question de même emplacement. Permettez-moi de vous présenter le code pour éviter ce phénomène.

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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>
Copier après la connexion

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;
}
Copier après la connexion

Description :

Les classes TextColumnA et ImageColumnA sont utilisées pour la gauche Texte descriptif, tandis que le cadre sert à afficher l'image de droite. Pour ces classes, float:left est spécifié, et les instructions descriptives décrites précédemment sont à gauche et l'image à droite. D'un autre côté, les classes TextColumnB et ImageColumnB sont utilisées pour le texte descriptif sur le côté droit, tandis que les cadres sont utilisés pour afficher les images sur le côté gauche. Dans ces classes, float:right est spécifié, donc le texte descriptif décrit précédemment sera placé à droite et l'image sera placée à gauche.

Lorsque la largeur de la fenêtre est réduite, le cadre décrit précédemment est d'abord affiché dans le cadre de float:left. Même dans les cadres où float:right est spécifié, le placement des instructions descriptives décrites précédemment est effectué en premier, de sorte que le texte décrivant le cadre sera affiché au-dessus de l'image.

L'effet est le suivant :

Utilisez lattribut float de CSS pour implémenter une page réactive secondaire

Réduire la largeur de la fenêtre. Le cadre se réduira, mais le texte de description apparaîtra uniformément sur l'image.

Utilisez lattribut float de CSS pour implémenter une page réactive secondaire

Regardons un exemple pratique basé sur le code précédent

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="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="image/flowers.jpg" / alt="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img  src="image/fruit.jpg" / alt="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="image/greatwall.jpg" / alt="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img  src="image/1.jpg" / alt="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="image/keiskei.jpg" / alt="Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire" ></div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>
Copier après la connexion

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%;
  }
}
Copier après la connexion

Description :

C'est la même chose que le code précédent, mais si vous utilisez des requêtes multimédias CSS et que le navigateur Web fait 760 pixels de large ou moins, le float est défini sur aucun et la colonne est supprimé. De plus, l'image est affichée à 80 % de la largeur de l'écran. Il est ainsi affiché dans une colonne.

L'effet est le suivant :

Utilisez lattribut float de CSS pour implémenter une page réactive secondaire

Si la largeur de la fenêtre est de 760 pixels ou plus, elle est affichée sur deux colonnes.

Utilisez lattribut float de CSS pour implémenter une page réactive secondaire

Lorsque la largeur de la fenêtre atteint 760 pixels ou moins, elle devient une colonne. La largeur de l'image correspond également à 80 % de la largeur horizontale.

Utilisez lattribut float de CSS pour implémenter une page réactive secondaire

Utilisez lattribut float de CSS pour implémenter une page réactive secondaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
attribut float
source：php.cn
Article précédent：Comment utiliser les effets d'image définis ? (exemple de code) Article suivant：Introduction à la méthode de définition de l'espacement des lignes de texte en CSS (exemple de code)
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Déplacez le contenu vers la gauche en ajoutant la propriété Largeur J'ai prévu des marges au corps. main {gauche marge : 200px ; marge droite : 200px ; aligne...
Depuis 2024-04-06 22:01:35
0
3
816
Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Calculer la somme des champs dans une autre table à l'aide d'une requête MySQL SQL J'ai un schéma comme celui-ci : Table utilisateur avec les attributs "user_id" e...
Depuis 2024-04-06 19:39:29
0
1
441
Styles CSS non appliqués au site Je crée un site Web en utilisant Bootstrap5 mais les propriétés index.css ne sont pas appl...
Depuis 2024-04-06 17:12:23
0
1
336
Comment modifier les propriétés du tableau imbriqué JSON "project_id" et "project_name" Nom :[{"project_id":1,"project_name":"CDP","role":...
Depuis 2024-04-06 15:39:51
0
1
466
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal