两个div并列显示的方式

1、flex定位

子元素等分父元素宽度

.parent{
    display:flex;
    width:100%;
    height:300px;
}
.son1{
    flex:1;
}
.son2{
    flex:1
}

2、float定位

.div1,.div2 {
    float:left;
    width:50%;
    height:300px;
}

3、display：table-cell

子元素不用设置宽度（设置也没用），它是由父元素的宽度决定的，几个table-cell等分父元素的宽度

.parent {
    display:table;
    width:100%;
    height:300px;
}

.son1,.son2 {
    display:table-cell;
}

4、绝对定位

translate(xx%,yy%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 xx%/yy%，以使其居于中心位置。

        .son1{
            background-color: blue;
            position: absolute;
            left:0;
            top:0;
            width:50%;
            height:300px;
            border:1px solid black;
        }

        .son2{
            background-color: blueviolet;
            position: absolute;
            transform: translate(100%,0);
            width:50%;
            height:300px;
        }