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

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

不言

Libérer： 2018-08-09 11:15:03

original

2001 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion