带浮动的CSS聊天气泡
[英]CSS Chat Bubbles with float
问题描述
我正在尝试设计一个聊天窗口，其中包含右侧用户的消息和左侧其他人的消息。 最初，我尝试不使用floats进行此操作，但失败了。 经过研究，我发现通常是使用float来完成的。 我用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>
2 个解决方案
解决方案1
3 2019-02-20 19:09:28
这是？ 我删除了::after
.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 { clear: both; display: table; margin:5px 0; }
<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>
解决方案2
1 已采纳 2019-02-20 19:10:47
是最好的解决方案？
我认为这与开发人员和情况有关。 如果您要问的是，没有“错误”的方法。 但是从长远来看，如果您想变得灵活并添加更多功能，有一些方法可以为您提供帮助。 这是使用flex属性的示例：
body { background-color: snow; display: flex; flex-flow: column nowrap; } body div { font-size: 18px; padding: 10px; color: white; border-radius: 5px; } .user { background-color: deepskyblue; align-self: flex-end; } .friend { background-color: orchid; align-self: flex-start; }
<body> <div contenteditable="true" class="user"> Have you completed the css chat tutorial </div> <div contenteditable="true" class="friend"> No I did not. </div> <div contenteditable="true" class="user"> Is it working? </div> <div contenteditable="true" class="friend"> NO :( </div> </body>
如何使用纯 CSS 绘制聊天气泡
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.