Question

我正在尝试设计一个聊天窗口，其中包含右侧用户的消息和左侧其他人的消息。最初，我尝试不使用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>

Answer 1

这是吗？我删除了::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>

Answer 2

浮游物是最好的解决方案吗？

我认为这与开发人员和情况有关。如果您要问的是，没有“错误”的方法。但是从长远来看，如果您想变得灵活并添加更多功能，有一些方法可以为您提供帮助。这是使用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聊天气泡

2 个答案: