css實(shí)現(xiàn)兩個(gè)div并列顯示的多種方法
發(fā)布時(shí)間：2023-07-12 15:57:53 作者：讓丄帝愛伱 
我要評(píng)論
我要評(píng)論CSS是一種樣式語(yǔ)言，其中,兩個(gè)div并列的實(shí)現(xiàn)是很常見的需求，本文就來介紹一下css實(shí)現(xiàn)兩個(gè)div并列顯示的多種方法，具有一定的參考價(jià)值，感興趣的可以了解一下
方法一：float浮動(dòng)，float:left;為左浮動(dòng)，也可以設(shè)置為float:right;右浮動(dòng)，也可以實(shí)現(xiàn)兩個(gè)div并列一行。
#div1{
width:50%;
height:300px;
background:blue;
float:left;
}
#div2{
width:50%;
height:300px;
background:green;
float:left;
}方法二：display:table-cell
#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;
}方法三：負(fù)margin
#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;
}方法四：絕對(duì)定位
*{
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布局
#parent{
display:flex;
}
#div1{
width:50%;
height:300px;
background:blue;
flex:1;
}
#div2{
width:50%;
height:300px;
background:green;
flex:1;
}到此這篇關(guān)于css實(shí)現(xiàn)兩個(gè)div并列顯示的多種方法的文章就介紹到這了,更多相關(guān)css兩個(gè)div并列顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS控制DIV層顯示和隱藏的實(shí)現(xiàn)方法
本文給大家?guī)砹薈SS控制DIV層顯示和隱藏的方法，是前端學(xué)習(xí)必須要掌握的基礎(chǔ)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的小伙伴一起學(xué)習(xí)吧2016-07-01