Home >Web Front-end >CSS Tutorial >Three ways to implement three-column layout with css (with code)

Three ways to implement three-column layout with css (with code)

不言Original: 2018-08-09 11:15:032019browse

This article introduces to you the three ways to implement three-column layout in CSS (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Floating layout

It is divided into three divs, and the other parent contains these three divs, using float,

Note: three div, left --> right ---> center in this order

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

#Set the middle box FLex: 1, so that you can achieve automatic Adapt, default horizontal arrangement

<!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 related knowledge points, generally used

1. Set display: flex

2. Container diagram:

Axis: horizontal main axis and vertical cross axis

3. Container properties

flex-direction: the direction of the main axis, row | row-reverse | column | column-reverse;

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

flex-flow: abbreviation for flex-direction and flex-wrap

justify-content: alignment on the main axis , flex-start | flex-end | center | space-between | space-around;

align-items: How to align on the cross axis, flex-start | flex-end | center | baseline | stretch;

Absolute positioning alignment

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

Three ways to implement three-column layout with css (with code)

Related articles