css_布局小技巧

Posted on |

左右布局

假设你想要一个左右布局，css有多种方式可以实习

使用背景梯度

如果只使用单个元素，那么可以使用背景梯度，使两种背景色在元素中各占一半。

1
2
3
4
5
6
7
8
9
.container {
  background: linear-gradient(
    to right, 
    #ff9e2c 0%, 
    #ff9e2c 50%, 
    #b6701e 50%, 
    #b6701e 100%
  );
}


使用绝对定位

如果想使内容也分布在左右两边，一个直接的想法是让两个子元素相对父元素使用百分比绝对定位。这样每个子元素可以有自己的内容。
这种方法的缺点是父元素需要一个指定的高度，而指定高度对内容变化是不友好的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container {
  display: table;
  width: 100%;
}

.left-half {
  background-color: #ff9e2c;
  position: absolute;
  left: 0px;
  width: 50%;
}

.right-half {
  background-color: #b6701e;
  position: absolute;
  right: 0px;
  width: 50%;
}

left
right

使用float

使用绝对定位需要指定父元素的高度，很容易引起bug。在子元素上增加float可以实现左右分布，注意在父元素上加入clearfix，不然会有bug。

1
2
3
4
5
6
7
8
9
10
.left-half {
  background-color: #ff9e2c;
  float: left;
  width: 50%;
}
.right-half {
  background-color: #b6701e;
  float: left;
  width: 50%;
}


left
right

使用inline-block属性

对于内联元素可以使用inline-block来实现左右布局(块级元素使用float，亲)。inline-block简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 1rem;
}

.left-half {
  background-color: #ff9e2c;
}

.right-half {
  background-color: #b6701e;
}

leftright

左中右布局

类似的可以使用float和inline-block，宽度设置为33.3%即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.left {
  display: inline-block;
  background-color: #ff9e2c;
  width: 33.3%;
}
.center {
  display: inline-block;
  background-color: #006CB2;
  width: 33.3%;
}

.right {
  display: inline-block;
  background-color: #b6701e;
  width: 33.3%;
}


left
center
right

水平居中

块级元素左右两边的margin设置为auto, 并给定一个固定宽度。内联元素的在父元素上设置text-align: center

块级div元素

内联span元素

垂直居中

对于单个元素，只需要设定上下margin相等即可垂直居中。
对于一行元素，css的vertical-align属性可以控制该行元素在竖直方向上如何对齐。垂直居中，只需要设定

1
2
3
.element{
  vertical-align: middle
}


left
center
right