Maison >interface Web >tutoriel CSS >Trois façons d'implémenter une mise en page à trois colonnes avec CSS (avec code)

Trois façons d'implémenter une mise en page à trois colonnes avec CSS (avec code)

不言original: 2018-08-09 11:15:032020parcourir

Cet article vous présente les trois façons d'implémenter une mise en page à trois colonnes en CSS (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La disposition flottante

est divisée en trois divs, et un autre parent contient ces trois divs, en utilisant float,

Remarque : trois div, à gauche - -> à droite ---> centre dans cet ordre

<!DOCTYPE html>
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style type="text/css"> 
body {
   margin: 0;   
   padding: 0; 
   } 
    .left {   
             float: left;   
             width: 300px;   
             height: 100px;   
             background-color: red; 
         } 
     .right {   
            float: right;    
            width: 300px;   
            height: 100px;   
            background-color: blue; 
           } 
      .center {
               margin: 0px 300px 0px 300px;   
               background-color: black;   
               height: 100px; 
              } 
</style> 
</head> 
<body> 
<div class="father"> 
<div class="left">1</div> 
<div class="right">2</div> 
<div class="center">3</div> 
</div> 
</body> 
</html>

Flex

définissez la case du milieu FLex : 1, de cette façon vous pouvez vous réaliser -adaptation, la disposition horizontale par défaut

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.father {
  display: flex;
}
.left {
  width: 300px;
  height: 100px;
  background-color: red;
}
.center {
  flex:1;
  height: 100px;
  background-color: black;
}
.right {
  width: 300px;
  height: 100px;
  background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div> 
</body>
</html>

les points de connaissances liés au flex sont généralement utilisés

1 Définir l'affichage : flex

Axe : axe principal horizontal et axe transversal vertical

3. Propriétés du conteneur

flex-direction : la direction de l'axe principal, row | column-reverse | ;

flex-wrap : line wrap, nowrap | wrap-reverse;

flex-flow : abréviation de flex-direction et flex-wrap

justify-content : Alignement de la broche sur l'axe transversal, flex-end | espace-entre |

align-items : Comment aligner sur l'axe transversal, flex-start | fin | centre | ligne de base | étirement ;

Alignement de positionnement absolu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.one {
  background-color: red;
  position: absolute;
  left: 0;
  width: 300px;
  height: 100px;
}
.two {
  left: 300px;
  right: 300px;
  background-color: blue;
  position: absolute;
  height: 100px;
}
.three {
  right: 0px;
  width: 300px;
  background-color: yellow;
  position: absolute;
  height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="one">1</div>
<div class="two">1</div>
<div class="three">1</div>
</div> 
</body>
</html>

Articles Liés

Voir plus