Heim > Artikel > Web-Frontend > Drei Möglichkeiten, ein dreispaltiges Layout mit CSS (mit Code) zu implementieren

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

不言Original: 2018-08-09 11:15:031985Durchsuche

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>

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>

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie richtet man beim Entwerfen einer Front-End-Webseite die Navigationsleiste zentriert aus (Codetest)?Nächster Artikel：Wie richtet man beim Entwerfen einer Front-End-Webseite die Navigationsleiste zentriert aus (Codetest)?

In Verbindung stehende Artikel

Mehr sehen