Maison > Article > interface Web > Utilisez l'attribut float de CSS pour implémenter une page réactive secondaire

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

不言original: 2018-11-09 16:26:192879parcourir

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>

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

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>

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>

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

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>

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 :

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>

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

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

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!

Déclaration：

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

Article précédent：Comment utiliser les effets d'image définis ? (exemple de code)Article suivant：Comment utiliser les effets d'image définis ? (exemple de code)

Articles Liés

Voir plus