使用浮动的CSS聊天气泡
使用浮动的CSS聊天气泡
提问于 2019-02-21 03:03:23
我正在尝试设计一个聊天窗口，右边是用户的消息，左边是另一个人的消息。起初，我尝试在不使用floats的情况下执行此操作，但失败了。通过一些研究，我发现这通常是使用floats完成的。我使用floats重写了它，但它仍然不起作用。
更新：floats是这类设计的最佳解决方案吗？
.user {
float: right;
background-color: deepskyblue;
margin-right: 20px;
font-size: 25px;
color: white;
}
.friend {
float: left;
background-color: orchid;
margin-left: 20px;
font-size: 25px;
color: white;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div contenteditable="true" class="user clearfix">
Have you completed the css chat tutorial
</div>
<div contenteditable="true" class="friend clearfix">
No I did not.
</div>
<div contenteditable="true" class="user clearfix">
Is it working?
</div>
<div contenteditable="true" class="friend clearfix">
NO :(
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54793542
复制相关文章
相似问题