聊天消息样式

Question

我在尝试为我的应用创建消息卡时遇到很多问题。基本上我希望消息 div 的内容与人名对齐，就像这个应用程序一样。我已经尝试将显示更改为 flex wrap，但仍然不一样，我正在寻找是否可以重新- 在此处创建此人在图像上所做的事情

现在我的是这个：

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #fc0303;
  border: 100px none #ffffff;
  border-radius: 7px;
}
::-webkit-scrollbar-thumb:hover {
  background: #fc0303;
}
::-webkit-scrollbar-thumb:active {
  background: #000000;
}
::-webkit-scrollbar-track {
  background: #191919;
  border: 100px none #ffffff;
  border-radius: 100px;
}
::-webkit-scrollbar-track:hover {
  background: #191919;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
  #menu_icon {
    width:40px;
    height:40px;
    border-radius:50%;
    transition: transform .9s;
    float:right
    
  }
  #menu_icon:hover {
    cursor:pointer;
      -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
  }
  .chat_box{
    background-color:#191919;
    overflow: scroll;
   overflow-x: hidden;
    border: 2px black dashed;
    width:100%;
    height:100%;
    border-radius:3px;
    padding:10px;
  }
  .chat_box_message_content{
    display:block;
    
  }
  .msg-txt {
    display: flex;
    flex-flow: wrap column;
    width: 80%;
}
    .chat_box_message_content p{
    color:white;
    
  }
  .chat_box_message_content img {
    width:35px;
    height:35px;
    border-radius:50%;
  }
  body {
  background: #eef0f1;
  color: black;
  font-family: "Roboto", sans-serif;
  overflow-x: hidden;
}

<div id="chat_box" class="chat_box">
          <img onclick="showMenu()" id="menu_icon" src="https://i.pinimg.com/736x/3f/e0/dc/3fe0dcb84367af59e8881edcb7747d58.jpg">
        
         <p style="color:white;font-size:13px;font-style: oblique;margin-top:50px">Usuário Conectado ao servidor!</p>
                    
    <div class="chat_box_message_content">
    <img src="https://i.pinimg.com/736x/3f/e0/dc/3fe0dcb84367af59e8881edcb7747d58.jpg">
                <span style="color:#9b72da" class="chat_box_message_content_icon">o</span>  
              <p class="chat_box_message_content_msg">
                 AAAAAAAAA
              </p>   
              
          </div>
                                      
    <div class="chat_box_message_content">
    <img src="https://i.pinimg.com/736x/3f/e0/dc/3fe0dcb84367af59e8881edcb7747d58.jpg">
                <span style="color:#da729f" class="chat_box_message_content_icon">Maria</span>  
              <p class="chat_box_message_content_msg">
                 teste
              </p>   
              
          </div>
                          </div>

你们可以帮我吗？

Answer 1

将 display: inline 添加到您的“.chat_box_message_content p” CSS 类中，如下所示：

.chat_box_message_content p {
    color:white;
    display: inline;
}

Answer 2

您可以尝试使卡片 div 具有 display: grid ，然后设置内容在网格内的位置。类似的东西：

::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }

    ::-webkit-scrollbar-button {
        width: 0px;
        height: 0px;
    }

    ::-webkit-scrollbar-thumb {
        background: #fc0303;
        border: 100px none #ffffff;
        border-radius: 7px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #fc0303;
    }

    ::-webkit-scrollbar-thumb:active {
        background: #000000;
    }

    ::-webkit-scrollbar-track {
        background: #191919;
        border: 100px none #ffffff;
        border-radius: 100px;
    }

    ::-webkit-scrollbar-track:hover {
        background: #191919;
    }

    ::-webkit-scrollbar-track:active {
        background: #333333;
    }

    ::-webkit-scrollbar-corner {
        background: transparent;
    }

    #menu_icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        transition: transform .9s;
        float: right
    }

    #menu_icon:hover {
        cursor: pointer;
        -ms-transform: scale(1.1);
        /* IE 9 */
        -webkit-transform: scale(1.1);
        /* Safari 3-8 */
        transform: scale(1.1);
    }

    .chat_box {
        background-color: #191919;
        overflow: scroll;
        overflow-x: hidden;
        border: 2px black dashed;
        width: 100%;
        height: 100%;
        border-radius: 3px;
        padding: 10px;
    }

    .chat_box_message_content {
        display: grid;
        grid-template-columns: 50px 5fr;
        grid-template-rows: 20px 30px;
        margin: 2em 0;
        grid-column-gap: 15px;
    }

    .msg-txt {
        display: flex;
        flex-flow: wrap column;
        width: 80%;
    }

    .chat_box_message_content span {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 1;
    }

    .chat_box_message_content p {
        color: white;
        grid-column-start: 2;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        padding: 5px 0;
    }

    .chat_box_message_content img {
        width: 100%;
        max-width: 45px;
        height: auto;
        border-radius: 50%;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    body {
        background: #eef0f1;
        color: black;
        font-family: "Roboto", sans-serif;
        overflow-x: hidden;
    }