css如何实现两个div并列显示的多种方法

方法一:float浮动,float:left;为左浮动,也可以设置为float:right;右浮动,也可以实现两个div并列一行。 div1{width:5

 方法一:float浮动,float:left;为左浮动,也可以设置为float:right;右浮动,也可以实现两个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;
}

方法三:负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;  
}

方法四:绝对定位

*{
    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;
}

到此这篇关于css实现两个div并列显示的多种方法的文章就介绍到这了,更多相关css两个div并列显示内容请搜索好代码网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持好代码网!

您可能有感兴趣的文章
HTML标签之!DOCTYPE文档类型声明

如何使用html+css代码如何实现冰墩墩和雪容融效果

html中checkbox与radio样式美化的简单实例

div设置可编辑内容的方法

css设置placeholder的颜色样式的方法