分享css实现两个div并列显示的5种方法
CSS是一种样式语言，其中,两个div并列的实现是很常见的需求，本文就来介绍一下css实现两个div并列显示的多种方法，具有一定的参考价值，感兴趣的可以了解一下
方法一：float浮动，float:left;为左浮动，也可以设置为float:right;右浮动，也可以实现两个div并列一行。
1
2
3
4
5
6
7
8
9
10
11
12
#div1{
width:50%;
height:300px;
background:blue;
float:left;
}
#div2{
width:50%;
height:300px;
background:green;
float:left;
}
方法二：display:table-cell
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#parent{
width:100%;
display:table;
}
#div1{
width:50%;
height:300px;
background:blue;
display:table-cell;
}
#div2{
width:50%;
height:300px;
background:green;
display:table-cell;
}
方法三：负margin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#parent{
display:flex;
overflow:hidden;
}
#div1{
width:50%;
height:300px;
background:blue;
padding-bottom:2000px;
margin-bottom:-2000px;
}
#div2{
width:50%;
height:300px;
background:green;
padding-bottom:2000px;
margin-bottom:-2000px;
}
方法四：绝对定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
*{
margin:0;
padding:0;
}
#div1{
width:50%;
height:300px;
background:blue;
position:absolute;
left:0;
top:0;
}
#div2{
width:50%;
height:300px;
background:green;
position:absolute;
transform:translate(100%, 0);
}
方法五：flex布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#parent{
display:flex;
}
#div1{
width:50%;
height:300px;
background:blue;
flex:1;
}
#div2{
width:50%;
height:300px;
background:green;
flex:1;
}
到此这篇关于css实现两个div并列显示的多种方法的文章就介绍到这了,希望可以帮到你。
转自：微点阅读 https://www.weidianyuedu.com