CSS布局 - 小宇的博客

254 字

1 分钟

CSS布局

2018-10-13

CSS

左右布局
左中右布局
水平居中
垂直居中

左右布局#

1
<div class="clearfix">
2
    <div class="a">左</a>
3
    <div class="b">右</a>
4
</div>
5

6
.clearfix {
7
    content: '';
8
    display: block;
9
    clear: both;
10
}
11
.a,
12
.b {
13
        width: 50%;
14
        height: 200px;
15
        float: left;
16
}

父元素的class设为clearfix 子元素全部设为左浮动,可设置width的百分比决定每个子元素占据的宽度

左中右布局(三列布局)#

1
<div class="left">左</div>
2
<div class="middle">中</div>
3
<div class="right">右</div>
4

5
.left{
6
    width: 200px;height: 300px; background: yellow; float: left;
7
}
8
.right{
9
    width: 170px; height: 300px; background: green; float: right;
10
}
11
.middle{
12
    height: 300px; background: red; margin-left: 220px; margin-right: 180px;
13
}

通过给左右两边设定宽度,左右元素分别向左右浮动中间元素设置左右边距

水平居中#

内联元素给该内联元素所在的块父级元素添加text-align: center; 样式
块级元素给该元素添加margin: 0 auto; 样式

垂直居中#

居中文字将该元素的line-height设为与height 一样的值
块级元素

.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }

CSS布局

https://blog.cxyxiaoyu.top/posts/css布局/

作者

小宇

发布于

2018-10-13

许可协议

CC BY-NC-SA 4.0

JS中的数据类型

几个关于CSS的套路

左中右布局(三列布局)