Drei Möglichkeiten, ein dreispaltiges Layout mit CSS (mit Code) zu implementieren-CSS-Tutorial-php.cn

Drei Möglichkeiten, ein dreispaltiges Layout mit CSS (mit Code) zu implementieren

不言

Freigeben： 2018-08-09 11:15:03

Original

2001 Leute haben es durchsucht

Dieser Artikel stellt Ihnen die drei Möglichkeiten vor, ein dreispaltiges Layout in CSS zu implementieren (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

Floating-Layout

ist in drei Divs unterteilt, und ein anderes übergeordnetes Element enthält diese drei Divs unter Verwendung von Float,

Hinweis: drei Divs, links - -> rechts ---> Mitte in dieser Reihenfolge

<!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>

Nach dem Login kopieren

Flex

Stellen Sie das mittlere Feld FLex: 1 ein, damit Sie die Anpassung anpassen können, Standard horizontale Anordnung

<!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>

Nach dem Login kopieren

Flex-bezogene Wissenspunkte, allgemein verwendet

1. Anzeige einstellen: Flex

2. Containerdiagramm:

Achse: horizontale Hauptachse und vertikale Querachse

flex-direction: die Richtung der Hauptachse, row-reverse |

flex -wrap: Zeilenumbruch, nowrap |. wrap-reverse;

flex-flow: Abkürzung für Flex-Direction und Flex-Wrap

justify-content: Ausrichtung auf der Hauptachse, Flex -start |. space-around;

Alignment auf der Querachse, flex-end | 🎜>

Absolute Positionierungsausrichtung

<!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>

Nach dem Login kopieren

Empfohlene verwandte Artikel:

Wie zentriert man beim Entwerfen einer Front-End-Webseite? Navigationsleiste ausrichten? (Code tatsächlicher Test)

Was sind die CSS-Layouts? Gängige CSS-Layoutmethoden (mit Code)

Das obige ist der detaillierte Inhalt vonDrei Möglichkeiten, ein dreispaltiges Layout mit CSS (mit Code) zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!