方法一：float浮動，float:left;為左浮動，也可以設置為float:right;右浮動，也可以實現兩個p并列一行。

#p1{
    width:50%;
    height:300px;
    background:blue;
    float:left;
}
#p2{
    width:50%;
    height:300px;
    background:green;
    float:left;
}

方法二：display:table-cell

#parent{
    width:100%;
    display:table;
}
#p1{
    width:50%;
    height:300px;
    background:blue;
    display:table-cell;
}
#p2{
    width:50%;
    height:300px;
    background:green;
    display:table-cell;
}

方法三：負margin

#parent{
    display:flex;
    overflow:hidden;
}
#p1{
    width:50%;
    height:300px;
    background:blue;
    padding-bottom:2000px;  
    margin-bottom:-2000px;  
}
#p2{
    width:50%;
    height:300px;
    background:green;
    padding-bottom:2000px;  
    margin-bottom:-2000px;  
}

方法四：絕對定位

*{
    margin:0;
    padding:0;
}
#p1{
    width:50%;
    height:300px;
    background:blue;
    position:absolute;
    left:0;
    top:0;
}
#p2{
    width:50%;
    height:300px;
    background:green;
    position:absolute;
    transform:translate(100%, 0);
}

方法五：flex布局

#parent{
    display:flex;
}
#p1{
    width:50%;
    height:300px;
    background:blue;
    flex:1;
}
#p2{
    width:50%;
    height:300px;
    background:green;
    flex:1;
}

到此這篇關于css實現兩個p并列顯示的多種方法的文章就介紹到這了,更多相關css兩個p并列顯示內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

總結

以上是生活随笔為你收集整理的css实现两个div并列显示的多种方法(css设置两个div并排)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。