时间戳

首页 > 解决方案 > CSS - 需要基本的聊天用户界面

html - CSS - 需要基本的聊天用户界面

问题描述

我正在开发一个聊天系统 UI，我遇到了左右对齐项目的问题

我想在右侧显示我的消息，在左侧显示其他人的消息。

Current code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            margin: 5% auto;
            width: 40%;
            padding: 10px;
            margin-bottom: 40px;
            border: 1px solid red;
        }
        .chat {
            border: 1px ridge #34495e;
        }

        .msg-box {
            background: green;
            width: 50%;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="chat">
        <p class="border msg-box msg-my">Lorem ipsum, dolor sit amet consectetur, adipisicing elit. Vitae, accusan</p>
        <p class="border msg-box">Lorem ipsum, dolor sit amet consectetur, adipisicing elit. Vitae, accusan</p>
    </div>
</div>
</body>
</html>

注意只需要左右对齐，而不是样式元素。

例子：在此处输入图像描述

标签： htmlcsstailwind-css

解决方案

也许这会让你开始：

https://codepen.io/riza-khan/pen/dyXjwoW

<div class="chat-container">
    <div class="me">Hi! How are you?</div>
    <div class="you">Hello! Great, and yourself?</div>
    <div class="me">Pretty good! How's the weather on your end?</div>
    <div class="you">Getting chilly, winter is almost here :)</div>
    <div class="me">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi eos nemo totam illum consequuntur hic exercitationem laudantium ab doloribus debitis.</div>
    <div class="you">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi eos nemo totam illum consequuntur hic exercitationem laudantium ab doloribus debitis.</div>
</div>

.chat-container {
    display: flex;
    flex-direction: column;

    .me,
    .you {
        margin-top: 1.5rem;
        padding: 0.5rem;
        border-radius: 0.5rem;
    }

    .me {
        margin-left: auto;
        border: solid 1px blue;
        max-width: 55%;
    }
    .you {
        margin-right: auto;
        border: solid 1px red;
        max-width: 55%;
    }
}

推荐阅读