how to arrange div containers among each other without using float-CodePudding

i have the below structure on my website and there are alternating float:left and float:right assigned to these div containers. But now I want all these divs not to appear side by side (as they do right now) but one below the other

html

<div >
   <div >...</div>
   <div >...</div>
   <div >...</div>
   <div >...</div>
</div>

css

.chat{
    min-height: 100px;
    max-height: 600px;
    height: 600px;
    overflow-y: scroll;
    position: relative;
}

.chat-message{
    background-color: #D3D3D3;
    max-width: 90%;
    margin: 20px 15px 0 15px;
    border-radius: 8px;
}

.a{
    float: left;
    background-color: #79d2a1;
}

.b{
    float: right;
    background-color: #7eaacd;
}

CodePudding user response：

Add clear: both; to the chat-message class, as follows:

.chat{
    min-height: 100px;
    max-height: 600px;
    height: 600px;
    overflow-y: scroll;
    position: relative;
}

.chat-message{
    background-color: #D3D3D3;
    max-width: 90%;
    margin: 20px 15px 0 15px;
    border-radius: 8px;
    clear: both;
}

.a{
    float: left;
    background-color: #79d2a1;
}

.b{
    float: right;
    background-color: #7eaacd;
}

<div >
   <div >...</div>
   <div >...</div>
   <div >...</div>
   <div >...</div>
</div>

CodePudding user response：

you say : But now I want all these divs not to appear side by side can you use bootstrap

<div ></div>

<div ></div>

<div ></div>

<div ></div>

<div ></div>

<div ></div>

CodePudding user response：

Try Flexbox

.chat{
        min-height: 100px;
        max-height: 600px;
        height: 600px;
        overflow-y: scroll;
        position: relative;
        display:flex;
        flex-direction: column;
    }

    .chat-message{
        background-color: #D3D3D3;
        max-width: 90%;
        margin: 20px 15px 0 15px;
        border-radius: 8px;
    }

    .a{ 
        align-self: flex-start;
        background-color: #79d2a1;
    }

    .b{
        align-self: flex-end;
        background-color: #7eaacd;
    }