两个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;}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！