如何对齐div标签左右极端？

Question

我使用socket.io创建了聊天应用程序，但来自发送方和接收方的消息必须位于极右和极左侧。 我怎样才能做到这一点 ？ 我添加了样式，但消息不是一个在另一个之下，而是内联。 我该如何解决？

码：

<div id="messages" className="card-block">
                            {this.state.messages.map((message, index) => {

                                let word = message.message.split('#')

                                if(word[0] === this.props.match.params.user){
                                    return (
                                        <div key={index} className="msgBoxRight"><p className="msgTextRight">{word[1]}</p></div>
                                    )
                                }else{
                                    return (
                                        <div key={index} className="msgBoxLeft"><p className="msgTextLeft">{word[1]}</p></div>
                                    ) 
                                }

                            })}
                        </div>

CSS：

#messages{
    height:300px;
    overflow: scroll;
    width: 100%;
}

.msgBoxRight {
    max-width: 350px;
    margin-top: 50px;
    float: right;
}

.msgTextRight {
    padding: 10px;
    background-color: #EBEEFD;
    border-radius: 25px;
}

.msgBoxLeft {
    max-width: 350px;
    margin-top: 10px;
    float: left;
}

.msgTextLeft {
    padding: 10px;
    background-color: #EBEEFD;
    border-radius: 25px;
}

截图：

它应该如何显示：

Answer 1

您可以使用Flexbox。 而且我认为你不需要div包装器。

 #messages { height: 300px; overflow: scroll; width: 100%; display: flex; flex-direction: column; } .msgTextRight, .msgTextLeft { max-width: 350px; background-color: #EBEEFD; border-radius: 25px; padding: 10px; } .msgTextRight { margin-top: 50px; margin-left: auto; } .msgTextLeft { margin-top: 10px; margin-right: auto; } 

 <div id="messages" class="card-block"> <p class="msgTextRight">hello Aditya</p> <p class="msgTextLeft">hello world</p> <p class="msgTextRight">i am varun</p> <p class="msgTextLeft">i am Aditya</p> </div> 

Answer 2

将“clear：both”添加到已浮动的元素，即类“.msgBoxRight”和“.msgBoxLeft” 。

 #messages { height: 300px; overflow: scroll; width: 100%; } .msgBoxRight { max-width: 350px; margin-top: 50px; float: right; clear: both; } .msgTextRight { padding: 10px; background-color: #EBEEFD; border-radius: 25px; } .msgBoxLeft { max-width: 350px; margin-top: 10px; float: left; clear: both; } .msgTextLeft { padding: 10px; background-color: #EBEEFD; border-radius: 25px; } 

 <div id="messages" class="card-block"> <div class="msgBoxRight"> <p class="msgTextRight">hello Aditya</p> </div> <div class="msgBoxLeft"> <p class="msgTextLeft">hello world</p> </div> <div class="msgBoxRight"> <p class="msgTextRight">i am varun</p> </div> <div class="msgBoxLeft"> <p class="msgTextLeft">i am Aditya</p> </div> </div>