Maison > Article > interface Web > Comment implémenter la disposition classique à trois colonnes de CSS

Comment implémenter la disposition classique à trois colonnes de CSS

php中世界最好的语言original: 2018-01-30 10:00:111470parcourir

Cette fois, je vais vous montrer comment implémenter la disposition classique à trois colonnes de CSS. Quelles sont les précautions pour implémenter la disposition classique à trois colonnes de CSS. Voici des cas pratiques, prenons un. regarder.

Cet article présente le schéma de mise en page CSS classique à trois colonnes, partagez-le avec tout le monde et prenez note pour vous-même, comme suit :

La mise en page à trois colonnes, comme son nom l'indique, est fixe des deux côtés et adaptatif au milieu. La disposition à trois colonnes est très courante dans le développement

1. Disposition flottante

La disposition à trois colonnes la plus simple consiste à utiliser float pour la mise en page. Tout d’abord, dessinons les colonnes de gauche et de droite :

<style>
  .left {
    float: left;
    width: 100px;
    height: 200px;
    background-color: red;
  }
 
  .right {
    float: right;
    width: 100px;
    height: 200px;
    background-color: yellow;
  }
</style>
   
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>

Ensuite, voyons comment gérer la colonne du milieu. Nous savons que pour les éléments float, ils se détacheront du flux de documents et que les autres boîtes ignoreront cet élément. (Mais le texte dans les autres zones fera toujours de la place pour cet élément et l'entourera.) Donc, pour le moment, il vous suffit d'ajouter un div normal dans le conteneur conteneur, qui ignorera la gauche et la droite et remplira tout le conteneur. De plus, la marge peut être gauche et droite pour sortir de l'espace :

<style>
   .left {
     float: left;
     width: 100px;
     height: 200px;
     background-color: red;
   }
  
   .right {
     float: right;
     width: 100px;
     height: 200px;
     background-color: yellow;
   }
  
   .main {
     background-color: green;
     height: 200px;
     margin-left: 120px;
     margin-right: 120px;
   }
  
   .container {
     border: 1px solid black;
   }
  
   <div class="container">
   <div class="left"></div>
   <div class="right"></div>
   <div class="main"></div>
   </div>

Avantages : Simple

Inconvénients : La partie médiane est chargée en dernier, ce qui affecte l'expérience lorsque il y a beaucoup de contenu

2. Les règles BFC

Les règles BFC (Block Formatting Context) stipulent que BFC ne chevauchera pas les éléments flottants. Donc, si vous définissez l'élément principal comme élément BFC :

<style>
  .left {
    float: left;
    width: 100px;
    height: 200px;
    background-color: red;
  }
 
  .right {
    float: right;
    width: 100px;
    height: 200px;
    background-color: yellow;
  }
 
  .main {
    background-color: green;
    height: 200px;
    overflow: hidden;
  }
 
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>

3. Disposition du Saint Graal

Le cœur de la disposition du Saint Graal est que les colonnes de gauche, du milieu et de droite sont toutes. flottant à travers float. Puis ajustez-le avec une marge négative.

La première étape consiste à jeter un œil à la disposition de base

<style>
    .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
    }
 
    .right {
        float: left;
        width: 100px;
        height: 200px;
        background-color: yellow;
    }
 
    .main {
        float: left;
        width: 100%;
        height: 200px;
        background-color: blue;
    }
</style>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

L'effet que vous voyez à ce moment est le suivant : les colonnes de gauche et de droite sont comprimées dans la deuxième ligne. C'est parce que la largeur de la main est de 100 %. Ensuite, nous mettons la gauche, le centre et la droite sur une seule ligne en ajustant les marges des colonnes de gauche et de droite :

.left {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100%;
    background-color: red;
}
 
.right {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100px;
    background-color: yellow;
}

La deuxième étape consiste à définir la marge gauche de gauche à -100 % . Ceci La colonne de gauche se déplacera au début de la première ligne. Fixez ensuite la marge gauche de droite à la valeur négative de sa largeur : -100px, et la colonne de droite sera également déplacée sur la même ligne que les colonnes de gauche et du milieu :

Cependant, nous n'avons pas terminé pourtant, essayons d'ajouter du texte au main :

<body>
    <div class="container">
        <div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

Vous pouvez voir que le texte est supprimé et nous devons ensuite résoudre ce problème.

La troisième étape consiste à donner un remplissage au conteneur. Le remplissage doit être exactement égal à la largeur des colonnes de gauche et de droite :

.container {
    padding-left: 100px;
    padding-right: 100px;
}

Les résultats que vous voyez sur. cette fois sont à gauche, au milieu, les trois colonnes de droite ont toutes rétréci, mais le texte est toujours supprimé.

La quatrième étape consiste à ajouter une disposition relative aux colonnes de gauche et de droite, puis à les déplacer vers l'extérieur en définissant les valeurs de gauche et de droite :

.left {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100%;
    position: relative;
    left: -100px;
    background-color: red;
}
 
.right {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100px;
    position: relative;
    right: -100px;
    background-color: yellow;
}

Ça y est, vous avez terminé :

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment créer un effet d'animation de cercle en html5

En h5, la page mobile doit être zoomed Comment implémenter

Comment utiliser H5 Canvas pour implémenter un graphique dynamique 3D

Comment utiliser la distribution FileReader de H5 pour lire des fichiers et son introduction à la Méthode

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!

php html5 css Float margin padding canvas

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 résoudre le problème si le calcul de CSS3 est calculé lorsque less est compilé ?Article suivant：Comment résoudre le problème si le calcul de CSS3 est calculé lorsque less est compilé ?

Articles Liés

Voir plus