ltinyho's Blog
0%

css两栏布局、圣杯布局、双飞翼布局

Posted on Edited on

最近几个月一直用vue在写手机端的项目，主要写业务逻辑，在js方面投入的时间和精力也比较多。这两天写页面明显感觉css布局方面的知识有不足，所以复习一下布局方法。

两栏布局

  • 1、浮动
1
2
3
4
5
6
7
8
9
10
11
.box1 .left {
   float: left;
   width: 100px;
   height: 100px;
   background-color: red;
 }
 .box1 .right {
   margin-left: 100px;
   height: 100px;
   background-color: green;
 }
1
2
3
4
<div class="box1">
  <div class="left"></div>
  <div class="right">两列自适应</div>
</div>
  • 2、定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box1{
    position: relative;
    width: 100%;
    height: 100px;
  }
  .box1 .left{
    position: absolute;
    width: 100px;
    height: 100%;
    background-color: red;
  }
  
  .box1 .right{
    margin-left: 100px;
    width: 100%;
    height: 100%;
    background-color: green;
  }
1
2
3
4
<div class="box1">
  <div class="left"></div>
  <div class="right"></div>
</div>
  • 3、flex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box1{
  display: flex;
  height: 100px;
}
.box1 .left{
  width: 100px;
  height: 100%;
  background-color: red;
}

.box1 .right{
  flex:1;
  height: 100%;
  background-color: green;
}
1
2
3
4
<div class="box1">
  <div class="left"></div>
  <div class="right"></div>
</div>

圣杯布局和双飞翼布局目的是我们希望先加载的是中间的部分，然后再开始加载 left 和 right 两个相对来说不是很重要的东西。

圣杯布局

圣杯布局给最外面加padding, 让 padding-left 和 padding-right 的数值等于left 和 right 的宽度，然后利用相对定位把他们再移动在两旁。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.box{
    padding:  0 100px;/* 留出左右的距离*/
    height: 100px;
  }
  .box .middle {
    float: left;
    width: 100%;
    height: 100%;
    background-color: yellow;
  }
  .box .left {
    float: left;
    width: 100px;
    margin-left: -100%;
    background-color: red;
    position: relative;
    left: -100px;/*往左拉*/
    height: 100%;
  }
  .box .right {
    float: left;
    width: 100px;
    margin-left: -100px;
    background-color: green;
    position: relative;
    right: -100px;
    height:100%;
  }
1
2
3
4
5
6
<div class="box">
  <!--注意顺序-->
  <div class="middle">middle</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

双飞翼布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.box {
    position: relative;
    height: 100px;
  }
  .middle-wrap {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
  }
  .middle-wrap .middle {
    height: 100%;
    margin: 0 100px; /*留出距离*/
    background-color: yellow;
  }
  .left {
    float: left;
    width: 100px;
    margin-left: -100%;
    height: 100%;
    background-color: red;
  }
  .right {
    float: left;
    width: 100px;
    height: 100%;
    margin-left: -100px;
    background-color: green;
  }
1
2
3
4
5
6
7
<div class="box">
  <div class="middle-wrap">
    <div class="middle"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>