Two-column layout
Write the style first
<div class="box">
<div class="left">左</div>
<div class="right">右</div>
</div>
Use float + margin method to achieve
<style>
div {
height: 200px;
color: red;
}
.left {
float: left;
width: 300px;
background-color: green;
}
.right {
width: 100%;
margin-left: 300px;
background-color: black;
}
</style>
You can also use position to achieve
div {
height: 200px;
color:red;
}
.left {
position: absolute;
left: 0;
width: 300px;
background-color: green;
}
.right {
width: 100%;
margin-left: 300px;
background-color: black;
}
You can also use flex to achieve
div {
height: 200px;
color: red;
}
.box {
display: flex;
}
.left {
flex: 0 0 300px;
background-color: green;
}
.right {
flex: 1 1;
background-color: black;
}
Three-column layout
Write style first
<div class="box">
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>
</div>
Use float + margin method to achieve
div {
height: 200px;
color: red;
}
.center {
width: 100%;
margin-left: 300px;
margin-right: 100px;
background-color: green;
}
.left {
float: left;
width: 300px;
background-color: black;
}
.right {
float: right;
width: 100px;
background-color: blue;
}
Use position to achieve
div {
height: 200px;
color: red;
}
.center {
width: 100%;
margin-left: 300px;
margin-right: 100px;
background-color: black;
}
.left {
position: absolute;
left: 0px;
width: 300px;
background-color: green;
}
.right {
position: absolute;
right: 0px;
width: 100px;
background-color: blue;
}
Use flex layout
.box{
display:flex;
}
.left{
background-color: red;
width: 100px;
height: 100px;
flex:0 1 auto;
order:-1;
}
.right{
background-color: blue;
width: 100px;
height: 100px;
flex:0 1 auto;
}
.center{
background-color:yellow;
flex:1 0 auto;
height: 100px;
}
Holy Grail Layout
Three-column layout, the left and right columns are fixed width, the middle is adaptive
<html>
2 <head>
3 <meta charset="utf-8">
4 <style type="text/css">
5 .main{
6 width: 80%;
7 height: 300px;
8 }
9 .left,.right,.middle{
10 float: left;
11 height: 100%;
12 }
13 .middle{
14 width: 100%;
15 background-color: gold;
16 }
17 .left{
18 width: 150px;
19 margin-left: -100%;
20 background-color: yellow;
21 }
22 .right{
23 width: 200px;
24 margin-left: -200px;
25 background-color: #ee4311;
26 }
27 .content{
28 margin:0 200px 0 150px;
29 }
30 </style>
31 </head>
32 <body>
33 <div class="main">
34
35 <div class="middle">
36 <div class="content">
37 middle-content
38 </div>
39 </div>
40 <div class="left">left</div>
41
42 <div class="right">right</div>
43 </div>
44 </body>
45 </html>
Shuangfei wing layout
Three-column layout, the width of the boxes on both sides is fixed, and the middle box is adaptive
<style>
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
#header,
#footer {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
}
#container {
overflow: hidden;
}
.column {
text-align: center;
height: 300px;
line-height: 300px;
}
#left, #right, #center {
float: left;
}
#center {
width: 100%;
background: rgb(206, 201, 201);
}
#left {
width: 200px;
margin-left: -100%;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 150px;
margin-left: -150px;
background: rgb(231, 105, 2);
}
.content {
margin: 0 150px 0 200px;
}
</style>
<body>
<div id="header">#header</div>
<div id="container">
<div id="center" class="column">
<div class="content">#center</div>
</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
</body>
The difference between the double-wing layout and the Holy Grail layout: The
solution to the problem of the double-wing layout and the double-wing layout is the same in the first half, that is, all three columns are floated, but the left and right columns plus negative margins make them side by side with the middle column div. To form a three-column layout. The difference lies in the idea of solving the problem that the content of the middle div is not blocked:
1.圣杯布局的为了中间内容不被修改，是通过包裹元素的padding-left和padding-right来使得内容div置于中间，然后再通过相对定位position:relative，配合right或left属性让左右两栏不遮挡中间内容。
2.双飞翼布局的解决方案是：通过在中间元素的内部新增一个div用于放置内容，然后通过左右外边距margin-left和margin-right为左右两栏留出位置。
Vertically centered
position + margin implementation
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
<style>
.box {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.box1 {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
background-color: black;
}
</style>
flex implementation
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
<style>
.box {
display: flex;
align-items: center;
justify-content: center;
width: 500px;
height: 500px;
background-color: blue;
}
.box1 {
width: 200px;
height: 200px;
background-color: black;
}
</style>
Center horizontally
Realized by text-align: center; the
premise is to see if its parent element is a block-level element, if it is, then directly set text-align: center to the parent element;
<body>
<div class="box">
<span class="box1">1111</span>
</div>
</body>
<style>
.box {
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
.box1{
width: 100px;
height: 100px;
}
</style>
If not, first set its parent element as a block-level element, and then set text-align: center;
.box {
display: block;
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
.box1{
width: 100px;
height: 100px;
}
Can be achieved using margin: 0 auto
#father {
width: 500px;
height: 300px;
background-color: skyblue;
}
#son {
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto;
You can also use positioning to achieve
.box {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
.box1 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50%;
margin-left: -50px;
}
Use flexbox layout
.box {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: center;
}
.box1 {
width: 100px;
height: 100px;
background-color: green;
}