我正在尝试设计一个聊天窗口,右边是用户的消息,左边是另一个人的消息。起初,我尝试在不使用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>
https://stackoverflow.com/questions/54793542
复制相似问题