Comment créer une mise en page stable à deux colonnes en HTML/CSS qui résiste à la rupture dans les navigateurs ?-tutoriel CSS-php.cn

Comment créer une mise en page stable à deux colonnes en HTML/CSS qui résiste à la rupture dans les navigateurs ?

DDD

Libérer： 2024-11-29 22:15:15

original

440 Les gens l'ont consulté

How to Create a Stable Two-Column Layout in HTML/CSS That Resists Breakage Across Browsers?

Comment obtenir une mise en page stable à deux colonnes en HTML/CSS

Créer une mise en page à deux colonnes en HTML/CSS peut s'avérer difficile, en particulier lorsque l'on recherche la stabilité dans divers navigateurs. Cet article fournit une solution qui répond aux exigences spécifiques décrites dans la requête initiale.

Propriétés du conteneur

Largeur : Conforme à 100 % de l'élément parent.
Hauteur : S'ajuste automatiquement pour s'adapter aux deux colonnes, éliminant ainsi les débordements ou barres de défilement.
Taille minimale :Égale au double de la largeur de la colonne de gauche.

Spécifications de la colonne

Hauteur : Variable, s'ajustant au contenu hauteur.
Disposition : Côte à côte avec bords supérieurs alignés.
Stabilité : Résistant à la rupture de la disposition lors de l'application des bordures, du rembourrage, ou les marges des colonnes.

Colonne de gauche Spécifications

Largeur : Valeur fixe et absolue en unités de pixels.

Spécifications de la colonne de droite

Largeur : Remplit l'espace restant dans le conteneur.
Calcul de la largeur : Largeur du conteneur moins la largeur de la colonne de gauche. Lorsque vous définissez une largeur de 100 % sur un élément DIV dans la colonne de droite, il doit remplir la colonne du bord droit de la colonne de gauche jusqu'au bord droit du conteneur.

Exigences de stabilité

Le conteneur se redimensionne en douceur sans interruption de la disposition, même avec des largeurs minimales ou étendues.
La colonne de gauche maintient une largeur fixe, empêchant rétrécissement.
La colonne de droite ne s'enroule pas sous la colonne de gauche.
Pas de barres de défilement ni de débordement de colonne.
Les éléments de la colonne de droite utilisent pleinement sa largeur.

Considérations

Des éléments flottants sont utilisés pour empêcher la colonne emballage.
Débordement : masqué est appliqué pour garantir le confinement du conteneur.
Les bordures sur les colonnes ne doivent pas perturber la mise en page.
Le contenu des colonnes ne doit pas compromettre la stabilité de la mise en page.

Débordement : masqué est appliqué pour garantir le confinement du conteneur.

Les bordures sur les colonnes ne doivent pas perturber la mise en page.

<html>
<head>
  <title>Cols</title>
  <style>
    #left {
      width: 200px;
      float: left;
    }
    #right {
      margin-left: 200px;
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div>

Copier après la connexion

Le contenu des colonnes ne doit pas compromettre la stabilité de la mise en page.

Débordement : caché est appliqué pour garantir le confinement du conteneur.Les bordures sur les colonnes ne doivent pas perturber la mise en page.Le contenu des colonnes ne doit pas compromettre la stabilité de la mise en page.Solution HTML/CSSCette solution répond à toutes les exigences spécifiées pour un environnement stable et une mise en page réglable sur deux colonnes en HTML/CSS, garantissant la cohérence dans les différents navigateurs.

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!