Próbuję zaprojektować okno czatu z wiadomościami od użytkownika po prawej stronie i wiadomości z drugiej osoby po lewej stronie. Początkowo próbowałem tego robić bez floats i nie powiodło się. Robiąc kilka badań, które znalazłem, że zazwyczaj to było wykonane za pomocą pływa. Przepisałem go za pomocą floats, ale nadal nie działa.

Aktualizacja: są pływa Najlepszym rozwiązaniem dla tego typu projektu?

.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>
1
Simple 20 luty 2019, 22:03

2 odpowiedzi

Najlepsza odpowiedź

są najlepszym rozwiązaniem?

Myślę, że jest w stosunku do dewelopera i sytuacji. Nie ma "złego" drogi, jeśli tego pytasz. Ale istnieją sposoby, które pomogą Ci na dłuższą metę, jeśli chcesz być elastyczny i dodać więcej funkcji. Oto przykład korzystający z właściwości 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>
1
soulshined 20 luty 2019, 19:13

Czy to jest? Usunięłem ::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>
3
dgknca 20 luty 2019, 19:09