聊天框结构
<!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>
.chat-item {
position: relative;
width: 100%;
font-family: 'HYk2gj';
}
.chat-item-ai {
width: 95%;
}
.chat {
width: 500px;
height: 500px;
flex: 1;
font-size: 20px;
overflow: auto;
display: flex;
flex-direction: column;
scroll-behavior: smooth;
padding: 0 60px;
position: relative;
background: pink;
}
.text {
display: inline-block;
margin-bottom: 5%;
}
.user {
float: right;
color: #000;
">blue;
}
.list {
cursor: pointer;
}
.ai {
float: left;
color: #000;
">red;
}
.ai,
.user {
white-space: pre-wrap;
}
</style>
</head>
<body>
<div class="chat fdsf">
<div class="chat-item">
<div class="user text">
<span>这个是问题</span>
</div>
</div>
<div class="chat-item chat-item-ai">
<div class="ai text">
<span>这个是回答</span>
</div>
</div>
<div class="chat-item">
<div class="user text">
<span>这个是问题</span>
</div>
</div>
<div class="chat-item chat-item-ai">
<div class="ai text">
<span>这个是回答</span>
</div>
</div>
<div class="chat-item">
<div class="user text">
<span>这个是问题</span>
</div>
</div>
<div class="chat-item chat-item-ai">
<div class="ai text">
<span>这个是回答</span>
</div>
</div>
<div class="chat-item">
<div class="user text">
<span>这个是问题</span>
</div>
</div>
<div class="chat-item chat-item-ai">
<div class="ai text">
<span>这个是回答</span>
</div>
</div>
<div class="chat-item">
<div class="user text">
<span>这个是问题</span>
</div>
</div>
<div class="chat-item chat-item-ai">
<div class="ai text">
<span>这个是回答长回答这个是回答长回答这个是回答长回答这个是回答长回答这个是回答长回答这个是回答长回答这个是回答长回答这个是回答长回答</span>
</div>
</div>
</div>
</body>
</html>
