5 ways to display two divs side by side using css

 

CSS is a style language. Among them, the realization of two divs side by side is a very common requirement. This article will introduce the various methods of CSS to realize the side-by-side display of two divs. It has certain reference value. If you are interested, you can learn about it.

 Method 1: Float, float:left; is left floating, or it can be set to float:right; to float right, or two divs can be placed side by side in one row.

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

Method 2: 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;
}

Method 3: Negative 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;
}

Method 4: Absolute positioning

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

Method five: flex layout

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

This concludes this article about the various methods of using CSS to display two divs side by side. I hope it can help you.

Reprinted from: Weidian Reading    https://www.weidianyuedu.com